From b620805e138ff4e0d30267355fa35d5f31e96ac5 Mon Sep 17 00:00:00 2001
From: eafonyang <eafonyang@gmail.com>
Date: Mon, 15 Jun 2026 13:38:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86=20EQ=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/EQPage.tsx                   | 1991 ++---------------
 .../pages/eq/components/AddPresetDialog.tsx   |  115 +
 .../pages/eq/components/BandParamDialog.tsx   |   89 +
 .../pages/eq/components/BatchEditDialog.tsx   |   69 +
 .../src/pages/eq/components/BrandDrawer.tsx   |  417 ++++
 client/src/pages/eq/components/FreqChart.tsx  |  442 ++++
 .../src/pages/eq/components/SaveBDialog.tsx   |   69 +
 .../src/pages/eq/components/ShareDialog.tsx   |  512 +++++
 client/src/pages/eq/hooks/useRawCurve.ts      |  102 +
 9 files changed, 1978 insertions(+), 1828 deletions(-)
 create mode 100644 client/src/pages/eq/components/AddPresetDialog.tsx
 create mode 100644 client/src/pages/eq/components/BandParamDialog.tsx
 create mode 100644 client/src/pages/eq/components/BatchEditDialog.tsx
 create mode 100644 client/src/pages/eq/components/BrandDrawer.tsx
 create mode 100644 client/src/pages/eq/components/FreqChart.tsx
 create mode 100644 client/src/pages/eq/components/SaveBDialog.tsx
 create mode 100644 client/src/pages/eq/components/ShareDialog.tsx
 create mode 100644 client/src/pages/eq/hooks/useRawCurve.ts

diff --git a/client/src/pages/EQPage.tsx b/client/src/pages/EQPage.tsx
index 95e47b2..fa9baae 100644
--- a/client/src/pages/EQPage.tsx
+++ b/client/src/pages/EQPage.tsx
@@ -11,38 +11,24 @@
      7. Total gain card: 总增益 value + AUTO toggle + slider
    ============================================================ */
 import { useDevice } from "@/contexts/DeviceContext";
-import { ChevronLeft, ChevronDown, Minus, Plus, Edit3, Headphones, Search, X, Share2, Copy, Loader2 } from "lucide-react";
+import { ChevronLeft, ChevronDown, Minus, Plus, Edit3, Headphones, Share2 } from "lucide-react";
 import { useLocation } from "wouter";
 import { useState, useMemo, useEffect, useRef, useCallback } from "react";
 import { cn } from "@/lib/utils";
-import { useStrokeDrawAnimation } from "@/lib/useStrokeDrawAnimation";
 import BottomNav from "@/components/BottomNav";
 import { FeatureGate } from "@/components/FeatureGate";
 import { toast } from "sonner";
 import {
-  decodeCustomBase64,
-  fetchLuxsinAudioBrands,
   fetchLuxsinAudioCurve,
-  fetchLuxsinAudioModelList,
-  fetchLuxsinAudioModels,
-  type LuxsinAudioBrand,
-  type LuxsinAudioModelListItem,
-  type LuxsinAudioModel,
   type PeqFilter,
   type PeqApplyPayload,
   type PeqChangePayload,
   type PeqPresetBody,
   type PeqState,
 } from "@/lib/luxsinApi";
-import * as echarts from "echarts";
 import {
-  getSectionsMatrix,
-  visualizeResponse,
-  getChartOps,
   getFilterType,
   getFilterShortName,
-  buildPeqSvgCurveData,
-  sampleCombinedPeqMagnitudeDb,
 } from "@/lib/peqAudio";
 import localeZh from "@/locales/data-zh.json";
 import localeZhHK from "@/locales/data-zh-HK.json";
@@ -59,12 +45,10 @@ import {
   DEFAULT_BANDS,
   FLAT_PRESET_FILTERS,
   PEQ_PRESET_MAX,
-  CATALOG_TARGETS,
   type BandParamKind,
   type PeqEqUi,
   type PeqCatalogItem,
   type PeqPresetLocalCache,
-  type CatalogTarget,
 } from "./eq/constants";
 import {
   eqInterp,
@@ -83,447 +67,18 @@ import {
 } from "./eq/utils";
 import { IOSToggle } from "./eq/components/IOSToggle";
 import { CyanSlider } from "./eq/components/CyanSlider";
-
-
-
-function LegendCurveIndicator({
-  loading,
-  color,
-}: {
-  loading: boolean;
-  color: string;
-}) {
-  if (loading) {
-    return (
-      <span
-        className="inline-block w-3 h-3 rounded-full border-2 animate-spin flex-shrink-0"
-        style={{ borderColor: `${color}40`, borderTopColor: color }}
-        aria-hidden="true"
-      />
-    );
-  }
-  return <div className="w-3 h-[2px] rounded flex-shrink-0" style={{ background: color }} />;
-}
-
-/* ── Frequency Response Chart ── */
-function FreqChart({
-  bands,
-  rawCurve,
-  rawCurveLoading = false,
-  selectedBand,
-  abMode,
-  onAbToggle,
-  onCopyAndSwitchTo,
-  onApplyB,
-  onSaveB,
-  onBandDrag,
-  onBandSelect,
-  eqUi,
-}: {
-  bands: Array<{ freq: number; gain: number; q: number; type: string; enabled: boolean }>;
-  rawCurve: number[] | null;
-  rawCurveLoading?: boolean;
-  selectedBand: number;
-  abMode: "A" | "B";
-  onAbToggle: (m: "A" | "B") => void;
-  onCopyAndSwitchTo: (to: "A" | "B") => void;
-  onApplyB: () => void;
-  onSaveB: () => void;
-  onBandDrag: (idx: number, patch: Partial<{ freq: number; gain: number }>) => void;
-  onBandSelect: (idx: number) => void;
-  eqUi: PeqEqUi;
-}) {
-  /** 频响图 SVG 高度（viewBox 与 CSS 一致） */
-  const H = 400;
-  const chartContainerRef = useRef<HTMLDivElement | null>(null);
-  const svgRef = useRef<SVGSVGElement | null>(null);
-  const draggingBandRef = useRef<number | null>(null);
-  const curvePathRef = useRef<SVGPathElement | null>(null);
-  const rawPathRef = useRef<SVGPathElement | null>(null);
-  const equalizedPathRef = useRef<SVGPathElement | null>(null);
-  const [chartWidth, setChartWidth] = useState(340);
-  const W = chartWidth;
-  const [isBandDragging, setIsBandDragging] = useState(false);
-
-  useEffect(() => {
-    const node = chartContainerRef.current;
-    if (!node) return;
-
-    const updateWidth = () => {
-      const nextWidth = Math.round(node.clientWidth);
-      if (nextWidth > 0) setChartWidth(nextWidth);
-    };
-
-    updateWidth();
-    const observer = new ResizeObserver(updateWidth);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, []);
-
-  const Y_DB_MAX = 20;
-
-  const freqToX = (f: number) => {
-    const logMin = Math.log10(20), logMax = Math.log10(20000);
-    return ((Math.log10(Math.max(20, Math.min(20000, f))) - logMin) / (logMax - logMin)) * W;
-  };
-  const gainToY = (g: number) => H / 2 - (g / Y_DB_MAX) * (H / 2 - 10);
-  const xToFreq = (x: number) => {
-    const logMin = Math.log10(20), logMax = Math.log10(20000);
-    const clampedX = Math.max(0, Math.min(W, x));
-    return Math.pow(10, logMin + (clampedX / W) * (logMax - logMin));
-  };
-  const yToGain = (y: number) => {
-    const clampedY = Math.max(10, Math.min(H - 10, y));
-    return ((H / 2 - clampedY) / (H / 2 - 10)) * Y_DB_MAX;
-  };
-
-  const updateBandFromPointer = (idx: number, clientX: number, clientY: number) => {
-    const svg = svgRef.current;
-    if (!svg || W <= 0) return;
-    const rect = svg.getBoundingClientRect();
-    if (!rect.width || !rect.height) return;
-
-    const x = ((clientX - rect.left) / rect.width) * W;
-    const y = ((clientY - rect.top) / rect.height) * H;
-    const freq = Math.round(Math.max(20, Math.min(20000, xToFreq(x))));
-    const gain = Number(Math.max(-Y_DB_MAX, Math.min(Y_DB_MAX, yToGain(y))).toFixed(1));
-    onBandDrag(idx, { freq, gain });
-  };
-
-  const handleBandPointerDown = (idx: number, e: React.PointerEvent<SVGGElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    draggingBandRef.current = idx;
-    setIsBandDragging(true);
-    onBandSelect(idx);
-    updateBandFromPointer(idx, e.clientX, e.clientY);
-  };
-
-  const handleSvgPointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
-    const idx = draggingBandRef.current;
-    if (idx === null) return;
-    e.preventDefault();
-    updateBandFromPointer(idx, e.clientX, e.clientY);
-  };
-
-  const stopDragging = () => {
-    draggingBandRef.current = null;
-    setIsBandDragging(false);
-  };
-
-  const curveData = useMemo(
-    () =>
-      buildPeqSvgCurveData({
-        bands,
-        width: W,
-        height: H,
-        fs: 48000,
-        yDbMax: Y_DB_MAX,
-        minFreq: 20,
-        maxFreq: 20000,
-        paddingY: 10,
-      }),
-    [bands, W, H],
-  );
-  const pathD = curveData.pathD;
-  const fillD = curveData.fillD;
-
-  /** 各带中心频率处级联响应 dB，与黄线同源 — 手柄纵坐标须用此值才能落在曲线上 */
-  const combinedMagDbAtHandles = useMemo(
-    () => bands.map((b) => sampleCombinedPeqMagnitudeDb(bands, b.freq, 48000)),
-    [bands],
-  );
-
-  const [curveVisibilityByMode, setCurveVisibilityByMode] = useState<
-    Record<"A" | "B", { eq: boolean; raw: boolean; equalized: boolean }>
-  >({
-    A: { eq: true, raw: true, equalized: true },
-    B: { eq: true, raw: false, equalized: false },
-  });
-  const showEq = curveVisibilityByMode[abMode].eq;
-  const showRaw = curveVisibilityByMode[abMode].raw;
-  const showEqualized = curveVisibilityByMode[abMode].equalized;
-
-  const toggleCurveVisibility = (key: "eq" | "raw" | "equalized") => {
-    setCurveVisibilityByMode((prev) => ({
-      ...prev,
-      [abMode]: {
-        ...prev[abMode],
-        [key]: !prev[abMode][key],
-      },
-    }));
-  };
-
-  const rawPathD = useMemo(() => {
-    if (!Array.isArray(rawCurve) || rawCurve.length !== curveData.points.length) return "";
-    return curveData.points
-      .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${gainToY(rawCurve[i] ?? 0).toFixed(1)}`)
-      .join(" ");
-  }, [rawCurve, curveData.points]);
-  const equalizedPathD = useMemo(() => {
-    if (!Array.isArray(rawCurve) || rawCurve.length !== curveData.points.length) return "";
-    return curveData.points
-      .map((p, i) => {
-        const y = gainToY((p.gainDb ?? 0) + (rawCurve[i] ?? 0));
-        return `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${y.toFixed(1)}`;
-      })
-      .join(" ");
-  }, [rawCurve, curveData.points]);
-  const hasRawCurve = !!rawPathD;
-  const hasEqualizedCurve = !!equalizedPathD;
-
-  // Intro draw once; EQ param edits update path in place without replaying the stroke animation.
-  const strokeAnimOpts = { durationMs: 1350, replayOnPathChange: false as const };
-  useStrokeDrawAnimation(curvePathRef, pathD, {
-    ...strokeAnimOpts,
-    enabled: !isBandDragging,
-  });
-  useStrokeDrawAnimation(rawPathRef, rawPathD, {
-    ...strokeAnimOpts,
-    enabled: !isBandDragging && !!rawPathD,
-  });
-  useStrokeDrawAnimation(equalizedPathRef, equalizedPathD, {
-    ...strokeAnimOpts,
-    enabled: !isBandDragging && !!equalizedPathD,
-  });
-
-  const targetMode: "A" | "B" = abMode === "A" ? "B" : "A";
-  const copyButtonText = eqInterp(eqUi.chartCopyTo, { mode: targetMode });
-
-  const freqLabels = [20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000];
-  const gainLabels = [20, 15, 10, 5, 0, -5, -10, -15, -20];
-
-  return (
-    <div className="ios-list-group p-3 mb-3">
-      {/* Legend row */}
-      <div className="flex items-center gap-3 mb-2 px-1">
-        <button
-          type="button"
-          className="flex items-center gap-1.5 active:opacity-80 transition-opacity"
-          onClick={() => toggleCurveVisibility("eq")}
-        >
-          <div className="w-3 h-[2px] rounded" style={{ background: "#FFED00" }} />
-          <span className="text-[10px]" style={{ color: "#FFED00", opacity: showEq ? 1 : 0.35 }}>Equalizer</span>
-        </button>
-        <button
-          type="button"
-          className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
-          onClick={() => toggleCurveVisibility("raw")}
-          disabled={rawCurveLoading || !hasRawCurve}
-        >
-          <LegendCurveIndicator loading={rawCurveLoading} color="#ffffff" />
-          <span
-            className="text-[10px]"
-            style={{ color: "#ffffff", opacity: rawCurveLoading || showRaw ? 1 : 0.35 }}
-          >
-            Raw
-          </span>
-        </button>
-        <button
-          type="button"
-          className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
-          onClick={() => toggleCurveVisibility("equalized")}
-          disabled={rawCurveLoading || !hasEqualizedCurve}
-        >
-          <LegendCurveIndicator loading={rawCurveLoading} color="#23d2fe" />
-          <span
-            className="text-[10px]"
-            style={{ color: "#23d2fe", opacity: rawCurveLoading || showEqualized ? 1 : 0.35 }}
-          >
-            Equalized
-          </span>
-        </button>
-      </div>
-
-      {/* A/B + DIFF controls */}
-      <div className="flex w-full items-center gap-2 mb-2 px-1">
-        <div className="flex min-w-0 items-center gap-2">
-        {/* A/B toggle pill */}
-        <div className="flex items-center rounded-[8px] overflow-hidden"
-          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}>
-          {(["A", "B"] as const).map((m) => (
-            <button key={m}
-              className="px-3 py-1 text-[12px] font-semibold transition-all duration-150"
-              style={abMode === m ? {
-                background: "#00FFF6", color: "#000", borderRadius: 6,
-              } : { color: "rgba(255,255,255,0.4)" }}
-              onClick={() => onAbToggle(m)}>
-              {m}
-            </button>
-          ))}
-        </div>
-        <button
-          className="px-3 py-1 rounded-[8px] text-[11px] text-white/50 active:text-white transition-colors"
-          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}
-          onClick={() => {
-            onCopyAndSwitchTo(targetMode);
-            setCurveVisibilityByMode((prev) => ({
-              ...prev,
-              [targetMode]: { ...prev[abMode] },
-            }));
-            toast.success(eqInterp(eqUi.toastChartCopied, { mode: targetMode }));
-          }}>
-          {copyButtonText}
-        </button>
-        </div>
-        <div className="ml-auto flex shrink-0 items-center gap-2">
-        <button
-          type="button"
-          className="px-3 py-1 rounded-[8px] text-[11px] text-white/50 active:text-white transition-colors"
-          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}
-          onClick={() => onApplyB()}
-        >
-          {eqUi.chartApplyB}
-        </button>
-        <button
-          type="button"
-          className="px-3 py-1 rounded-[8px] text-[11px] text-white/50 active:text-white transition-colors"
-          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}
-          onClick={() => onSaveB()}
-        >
-          {eqUi.chartSaveB}
-        </button>
-        </div>
-      </div>
-
-      {/* SVG chart */}
-      <div
-        ref={chartContainerRef}
-        className="rounded-[10px] overflow-hidden"
-        style={{ background: "rgba(10,12,10,0.7)" }}
-      >
-        <svg
-          ref={svgRef}
-          viewBox={`0 0 ${W} ${H}`}
-          className="w-full"
-          style={{ height: H, touchAction: "none" }}
-          onPointerMove={handleSvgPointerMove}
-          onPointerUp={stopDragging}
-          onPointerCancel={stopDragging}
-          onPointerLeave={stopDragging}
-        >
-          {/* dB grid */}
-          {gainLabels.map((g) => (
-            <g key={g}>
-              <line x1="0" y1={gainToY(g)} x2={W} y2={gainToY(g)}
-                stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
-              <text x="3" y={gainToY(g) - 2} fontSize="7" fill="rgba(255,255,255,0.2)">
-                {g > 0 ? `+${g}` : g}
-              </text>
-            </g>
-          ))}
-          {/* Freq grid */}
-          {freqLabels.map((f) => (
-            <line key={f} x1={freqToX(f)} y1="0" x2={freqToX(f)} y2={H - 12}
-              stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
-          ))}
-          {/* Zero line */}
-          <line x1="0" y1={H / 2} x2={W} y2={H / 2} stroke="rgba(255,255,255,0.15)" strokeWidth="1" />
-          {/* Fill */}
-          {showEq && <path d={fillD} fill="rgba(255, 237, 0, 0.08)" />}
-          {/* EQ curve */}
-          {showEq && (
-            <path
-              ref={curvePathRef}
-              d={pathD}
-              fill="none"
-              stroke="#FFED00"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          )}
-          {/* Raw */}
-          {rawPathD && showRaw && (
-            <path
-              ref={rawPathRef}
-              d={rawPathD}
-              fill="none"
-              stroke="#ffffff"
-              strokeWidth="1.6"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              opacity="0.9"
-            />
-          )}
-          {/* Equalized = EQ + Raw */}
-          {equalizedPathD && showEqualized && (
-            <path
-              ref={equalizedPathRef}
-              d={equalizedPathD}
-              fill="none"
-              stroke="#23d2fe"
-              strokeWidth="1.8"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              opacity="0.95"
-            />
-          )}
-          {/* Band nodes with index */}
-          {showEq && bands.map((band, i) => (
-            <g
-              key={i}
-              style={{ cursor: "grab" }}
-              onPointerDown={(e) => handleBandPointerDown(i, e)}
-            >
-              {(() => {
-                const isSelected = i === selectedBand;
-                const outerR = isSelected ? 8.8 : 7;
-                const fillColor = isSelected ? "#FFED00" : "rgba(0,0,0,0.5)";
-                const strokeColor = isSelected ? "#FFED00" : "#FFED00";
-                const textColor = isSelected ? "#000000" : "#FFED00";
-                const handleY = gainToY(combinedMagDbAtHandles[i] ?? 0);
-                return (
-                  <>
-                    <circle
-                      cx={freqToX(band.freq)}
-                      cy={handleY}
-                      r="14"
-                      fill="transparent"
-                    />
-                    <circle
-                      cx={freqToX(band.freq)}
-                      cy={handleY}
-                      r={outerR}
-                      fill={fillColor}
-                      stroke={strokeColor}
-                      strokeWidth={isSelected ? 1.8 : 1.5}
-                    />
-                    <text
-                      x={freqToX(band.freq)}
-                      y={handleY + 3.5}
-                      textAnchor="middle"
-                      fontSize="7"
-                      fill={textColor}
-                      fontWeight="bold"
-                      pointerEvents="none"
-                    >
-                      {i + 1}
-                    </text>
-                  </>
-                );
-              })()}
-            </g>
-          ))}
-          {/* Freq axis labels */}
-          {freqLabels.map((f) => (
-            <text key={f} x={freqToX(f)} y={H - 1} textAnchor="middle"
-              fontSize="7" fill="rgba(255,255,255,0.25)">
-              {f >= 1000 ? `${f / 1000}k` : f}
-            </text>
-          ))}
-        </svg>
-      </div>
-    </div>
-  );
-}
+import { FreqChart } from "./eq/components/FreqChart";
+import { BandParamDialog } from "./eq/components/BandParamDialog";
+import { SaveBDialog } from "./eq/components/SaveBDialog";
+import { AddPresetDialog } from "./eq/components/AddPresetDialog";
+import { BatchEditDialog } from "./eq/components/BatchEditDialog";
+import { ShareDialog } from "./eq/components/ShareDialog";
+import { BrandDrawer } from "./eq/components/BrandDrawer";
+import { useRawCurve } from "./eq/hooks/useRawCurve";
 
 /* ── Default bands imported from eq/constants ── */
 
-
 /* ── Main Component ── */
-const rawCurveCache = new Map<string, number[] | null>();
-
 export default function EQPage() {
   const [, setLocation] = useLocation();
   const {
@@ -595,38 +150,17 @@ export default function EQPage() {
   const bandSliderDragRef = useRef<BandParamKind | null>(null);
   const [isBatchEditDialogOpen, setIsBatchEditDialogOpen] = useState(false);
   const [batchEditText, setBatchEditText] = useState("");
-  type BrandDrawerTab = "brands" | "models" | "target";
   const [isBrandDrawerOpen, setIsBrandDrawerOpen] = useState(false);
-  const [brandDrawerTab, setBrandDrawerTab] = useState<BrandDrawerTab>("brands");
+  const [brandDrawerKey, setBrandDrawerKey] = useState(0);
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
-  const [shareDialogTab, setShareDialogTab] = useState<"share" | "import" | "myShares">("share");
-  const [shareSelectedIdx, setShareSelectedIdx] = useState<number>(headphoneIdx);
-  const [shareCode, setShareCode] = useState<string | null>(null);
-  const [shareGenerating, setShareGenerating] = useState(false);
-  const [importCodeInputs, setImportCodeInputs] = useState<string[]>(["", "", "", "", ""]);
-  const [importQuerying, setImportQuerying] = useState(false);
-  const [importedEqData, setImportedEqData] = useState<{ name: string; brand?: string; model?: string; form?: string; filters?: any[] | string; preamp?: number } | null>(null);
-  const [mySharesList, setMySharesList] = useState<Array<{ code: string; name: string }>>([]);
-  const [mySharesLoading, setMySharesLoading] = useState(false);
-  const [brandSearchQuery, setBrandSearchQuery] = useState("");
-  const [catalogBrands, setCatalogBrands] = useState<LuxsinAudioBrand[]>([]);
-  const [catalogBrandsLoading, setCatalogBrandsLoading] = useState(false);
-  const [catalogBrandsError, setCatalogBrandsError] = useState<string | null>(null);
-  const [catalogSearchResults, setCatalogSearchResults] = useState<LuxsinAudioModelListItem[]>([]);
-  const [catalogSearchLoading, setCatalogSearchLoading] = useState(false);
-  const [catalogSearchError, setCatalogSearchError] = useState<string | null>(null);
-  const [selectedCatalogBrand, setSelectedCatalogBrand] = useState<string>("");
-  const [catalogModels, setCatalogModels] = useState<LuxsinAudioModel[]>([]);
-  const [catalogModelsLoading, setCatalogModelsLoading] = useState(false);
-  const [catalogModelsError, setCatalogModelsError] = useState<string | null>(null);
-  const [selectedCatalogModelFromSearch, setSelectedCatalogModelFromSearch] = useState<string>("");
-  const [selectedCatalogModelName, setSelectedCatalogModelName] = useState("");
-  const [selectedCatalogModelForm, setSelectedCatalogModelForm] = useState<string | undefined>(undefined);
-  const [selectedCatalogTarget, setSelectedCatalogTarget] = useState<string>("");
-  const [isConfirmingTarget, setIsConfirmingTarget] = useState(false);
-  const [currentRawCurve, setCurrentRawCurve] = useState<number[] | null>(null);
-  const [rawCurveLoading, setRawCurveLoading] = useState(false);
-  const rawCurveCacheRef = useRef(rawCurveCache);
+  const [shareDialogKey, setShareDialogKey] = useState(0);
+  const {
+    currentRawCurve,
+    setCurrentRawCurve,
+    rawCurveLoading,
+    setRawCurveLoading,
+    loadRawCurveForPeq,
+  } = useRawCurve();
   const allowPeqRemoteSyncRef = useRef(false);
   const lastPeqCatalogSyncKeyRef = useRef("");
   const syncingHeadphoneRef = useRef(false);
@@ -672,77 +206,6 @@ export default function EQPage() {
   const preampValue = Number(currentPeq?.preamp ?? 0);
   const autoPreOn = (currentPeq?.autoPre ?? 0) === 1;
 
-  const filteredCatalogBrands = useMemo(() => {
-    const q = brandSearchQuery.trim().toLowerCase();
-    if (!q) return catalogBrands;
-    return catalogBrands.filter((b) => b.name.toLowerCase().includes(q));
-  }, [catalogBrands, brandSearchQuery]);
-
-  const availableCatalogTargets = useMemo(() => {
-    if (selectedCatalogModelForm === "in-ear") {
-      return CATALOG_TARGETS.filter((item) => item.ear === "in" || item.ear === "all");
-    }
-    if (selectedCatalogModelForm === "over-ear") {
-      return CATALOG_TARGETS.filter((item) => item.ear === "over" || item.ear === "all");
-    }
-    return CATALOG_TARGETS;
-  }, [selectedCatalogModelForm]);
-
-  const loadCatalogBrands = useCallback(async () => {
-    setCatalogBrandsLoading(true);
-    setCatalogBrandsError(null);
-    try {
-      const list = await fetchLuxsinAudioBrands();
-      const sorted = [...list].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
-      setCatalogBrands(sorted);
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : "加载失败";
-      setCatalogBrandsError(msg);
-      toast.error(eqUi.toastBrandsFail);
-    } finally {
-      setCatalogBrandsLoading(false);
-    }
-  }, [eqUi]);
-
-  const searchCatalogByKeyword = useCallback(async (keyword: string) => {
-    const q = keyword.trim();
-    if (!q) {
-      setCatalogSearchResults([]);
-      setCatalogSearchError(null);
-      setCatalogSearchLoading(false);
-      return;
-    }
-    setCatalogSearchLoading(true);
-    setCatalogSearchError(null);
-    try {
-      const list = await fetchLuxsinAudioModelList(q, 1000);
-      setCatalogSearchResults(list);
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : "搜索失败";
-      setCatalogSearchError(msg);
-      setCatalogSearchResults([]);
-    } finally {
-      setCatalogSearchLoading(false);
-    }
-  }, []);
-
-  const loadCatalogModels = useCallback(async (brandName: string) => {
-    setSelectedCatalogModelFromSearch("");
-    setCatalogModelsLoading(true);
-    setCatalogModelsError(null);
-    try {
-      const list = await fetchLuxsinAudioModels(brandName);
-      const sorted = [...list].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
-      setCatalogModels(sorted);
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : "加载失败";
-      setCatalogModelsError(msg);
-      toast.error(eqUi.toastModelsFail);
-    } finally {
-      setCatalogModelsLoading(false);
-    }
-  }, [eqUi]);
-
   const guardPeqPresetCapacity = () => {
     if (peqItems.length < PEQ_PRESET_MAX) return true;
     toast.error(
@@ -755,47 +218,9 @@ export default function EQPage() {
   const openAddHeadsetCatalog = () => {
     if (!guardPeqPresetCapacity()) return;
     setIsBrandDrawerOpen(true);
-    setBrandDrawerTab("brands");
-    setBrandSearchQuery("");
-    setCatalogSearchResults([]);
-    setCatalogSearchError(null);
-    setCatalogSearchLoading(false);
-    setSelectedCatalogBrand("");
-    setSelectedCatalogModelFromSearch("");
-    setSelectedCatalogModelName("");
-    setSelectedCatalogModelForm(undefined);
-    setSelectedCatalogTarget("");
-    setCatalogModels([]);
-    setCatalogModelsError(null);
-    void loadCatalogBrands();
+    setBrandDrawerKey((k) => k + 1);
   };
 
-  useEffect(() => {
-    if (!isBrandDrawerOpen || brandDrawerTab !== "brands") return;
-    const timer = window.setTimeout(() => {
-      void searchCatalogByKeyword(brandSearchQuery);
-    }, 260);
-    return () => window.clearTimeout(timer);
-  }, [isBrandDrawerOpen, brandDrawerTab, brandSearchQuery, searchCatalogByKeyword]);
-
-  useEffect(() => {
-    if (!isBrandDrawerOpen) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setIsBrandDrawerOpen(false);
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [isBrandDrawerOpen]);
-
-  useEffect(() => {
-    if (!isBrandDrawerOpen) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [isBrandDrawerOpen]);
-
   const normalizeFiltersFromPeq = (peq: { filters?: any[] | string } | undefined) => {
     if (!peq) return [] as typeof bands;
     let filters: any[] = [];
@@ -1216,90 +641,6 @@ export default function EQPage() {
     setAbMode("A");
   }, [headphoneIdx]);
 
-  // 获取耳机原始曲线
-  const getModelCurve = async (brand: string, name: string) => {
-    try {
-      console.log("[modelCurve] request", { brand, name });
-      const resp = await fetch(
-        `//api.luxsin.com.cn/audio/modelCurve?brand=${encodeURIComponent(brand)}&name=${encodeURIComponent(name)}`
-      );
-      const data = await resp.text();
-      // 使用自定义 Base64 解码
-      const decoded = decodeCustomBase64(data);
-      const parsed = JSON.parse(decoded);
-      console.log("[modelCurve] decoded", {
-        hasFrRaw:
-          !!(parsed &&
-            typeof parsed === "object" &&
-            "fr" in (parsed as Record<string, unknown>) &&
-            (parsed as { fr?: unknown }).fr &&
-            typeof (parsed as { fr?: unknown }).fr === "object" &&
-            "raw" in ((parsed as { fr?: Record<string, unknown> }).fr ?? {})),
-      });
-      console.log("[modelCurve] fr.raw", (parsed as { fr?: { raw?: unknown } }).fr?.raw);
-      return parsed;
-    } catch (error) {
-      console.log("[modelCurve] request failed", error);
-      return null;
-    }
-  };
-
-  const loadRawCurveForPeq = useCallback(
-    async (peq: { brand?: string; model?: string; name?: string } | undefined): Promise<number[] | null> => {
-      const brand = peq?.brand?.trim() ?? "";
-      const model = peq?.model?.trim() ?? "";
-      if (!brand || !model) return null;
-
-      const cacheKey = `${brand}|${model}`;
-      if (rawCurveCacheRef.current.has(cacheKey)) {
-        const cached = rawCurveCacheRef.current.get(cacheKey);
-        if (cached) {
-          console.log("[modelCurve] cache hit", { brand, model, rawLength: cached.length });
-        } else {
-          console.log("[modelCurve] cache hit (no raw)", { brand, model });
-        }
-        return cached ?? null;
-      }
-
-      const modelCurve = await getModelCurve(brand, model);
-      if (modelCurve && typeof modelCurve === "object") {
-        const payload = modelCurve as {
-          fr?: { raw?: unknown } | unknown;
-        };
-        const rawCandidate =
-          payload.fr && typeof payload.fr === "object" && Array.isArray((payload.fr as { raw?: unknown }).raw)
-            ? (payload.fr as { raw?: unknown }).raw
-            : null;
-        const raw = Array.isArray(rawCandidate)
-          ? rawCandidate
-              .map((point) => {
-                if (typeof point === "number" && Number.isFinite(point)) return point;
-                if (Array.isArray(point) && point.length >= 2 && typeof point[1] === "number") return point[1];
-                if (point && typeof point === "object") {
-                  const y = (point as Record<string, unknown>).y
-                    ?? (point as Record<string, unknown>).value
-                    ?? (point as Record<string, unknown>).db
-                    ?? (point as Record<string, unknown>).gain;
-                  if (typeof y === "number" && Number.isFinite(y)) return y;
-                }
-                return NaN;
-              })
-          : null;
-        const cleanedRaw = raw && raw.every((v) => Number.isFinite(v)) ? (raw as number[]) : null;
-        rawCurveCacheRef.current.set(cacheKey, cleanedRaw);
-        console.log("[modelCurve] raw check", {
-          brand,
-          model,
-          hasRaw: !!cleanedRaw,
-          rawLength: cleanedRaw?.length ?? 0,
-        });
-        return cleanedRaw;
-      }
-      return null;
-    },
-    [],
-  );
-
   // 加载耳机列表并初始化曲线
   useEffect(() => {
     async function loadHeadphones() {
@@ -1414,7 +755,6 @@ export default function EQPage() {
       if (cancelled) return;
       setCurrentRawCurve(raw);
       setRawCurveLoading(false);
-      renderCharts(nextBands, raw, false);
     })();
     requestAnimationFrame(() => {
       syncingHeadphoneRef.current = false;
@@ -1597,86 +937,8 @@ export default function EQPage() {
     return () => window.removeEventListener("pointerdown", onPointerDown);
   }, []);
 
-  const chartRef = useRef<echarts.ECharts | null>(null);
   const band = bands[selectedBand] ?? DEFAULT_BANDS[selectedBand] ?? DEFAULT_BANDS[0];
 
-  // Render frequency response chart using ECharts
-  const renderCharts = (peqFilters: typeof bands, raw: number[] | null, changeParam: boolean) => {
-    const list: any[] = [];
-    const fs = 48000;
-
-    // Calculate coefficient matrix for each filter
-    peqFilters.forEach((item) => {
-      const filterType = getFilterType(item.type);
-      
-      const coeff = getSectionsMatrix(
-        item.gain,
-        item.freq,
-        item.q,
-        filterType,
-        false,
-        fs
-      );
-      if (coeff) {
-        list.push(coeff);
-      }
-    });
-
-    // Get frequency response data
-    const dataSet = visualizeResponse(list, fs);
-    const ops = getChartOps(dataSet, 20, -20, '#FFED00') as any;
-
-    // Get or create chart instance
-    const chartDom = document.getElementById('freq-chart');
-    if (!chartDom) return;
-
-    if (!chartRef.current) {
-      chartRef.current = echarts.init(chartDom);
-    }
-
-    const myChart = chartRef.current;
-
-    // Handle changeParam (get raw data from existing chart)
-    if (changeParam && myChart) {
-      const option = myChart.getOption() as { series?: Array<{ data?: number[] }> };
-      if (option.series && option.series.length > 1) {
-        raw = (option.series[1] as any).data;
-      }
-    }
-
-    // Clear and rebuild chart
-    myChart.clear();
-
-    // Add Raw and Equalized curves if raw data is available (expects same 349 points as EQ curve)
-    if (Array.isArray(raw) && raw.length === dataSet[1].length) {
-      ops.series.push({
-        name: 'Raw',
-        data: raw,
-        type: 'line',
-        showSymbol: false,
-        lineStyle: {
-          color: '#ffffff',
-        },
-      });
-
-      // Calculate equalized curve
-      const equalizedRaw = dataSet[1].map((value, index) => value + raw[index]);
-      ops.series.push({
-        name: 'Equalized',
-        data: equalizedRaw,
-        type: 'line',
-        showSymbol: false,
-        lineStyle: {
-          color: '#23d2fe',
-          width: 6,
-          opacity: 0.7,
-        },
-      });
-    }
-
-    myChart.setOption(ops, true);
-  };
-
   const handleApplyB = useCallback(async () => {
     const peq = peqItems[headphoneIdx];
     if (!peq?.name) {
@@ -1716,9 +978,6 @@ export default function EQPage() {
 
     try {
       await upgradePeqChange(payload);
-      if (peqItems.length > 0 && headphoneIdx < peqItems.length) {
-        renderCharts(bBands, currentRawCurve, false);
-      }
       toast.success(eqUi.toastApplyBSuccess);
     } catch {
       skipPeqAutoSyncRef.current = false;
@@ -1726,7 +985,6 @@ export default function EQPage() {
     }
   }, [
     bandsByMode.B,
-    currentRawCurve,
     eqUi.toastApplyBFail,
     eqUi.toastApplyBSuccess,
     headphoneIdx,
@@ -1929,15 +1187,7 @@ export default function EQPage() {
             className="ios-list-group flex flex-col items-center justify-center py-3 gap-2 active:opacity-70 transition-opacity"
             onClick={() => {
               setIsShareDialogOpen(true);
-              setShareDialogTab("share");
-              setShareSelectedIdx(headphoneIdx);
-              setShareCode(null);
-              setShareGenerating(false);
-              setImportCodeInputs(["", "", "", "", ""]);
-              setImportQuerying(false);
-              setImportedEqData(null);
-              setMySharesList([]);
-              setMySharesLoading(false);
+              setShareDialogKey((k) => k + 1);
             }}>
             <div className="w-10 h-10 rounded-[12px] flex items-center justify-center"
               style={{ background: "rgba(0,255,246,0.12)", border: "1px solid rgba(0,255,246,0.2)" }}>
@@ -2233,1075 +1483,160 @@ export default function EQPage() {
         </FeatureGate>
       </div>
 
-      {bandParamDialog && bandParamDialogMeta && (
-        <div
-          className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
-          onClick={closeBandParamDialog}
-        >
-          <div
-            className="w-full max-w-[420px] rounded-[14px] p-5"
-            style={{
-              background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
-              border: "1px solid rgba(255,255,255,0.12)",
-              boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between mb-2">
-              <h3 className="text-[18px] font-semibold leading-tight text-white/90">{bandParamDialogMeta.title}</h3>
-              <button
-                type="button"
-                className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
-                onClick={closeBandParamDialog}
-                aria-label={eqUi.closeDrawer}
-              >
-                <X size={20} />
-              </button>
-            </div>
-            <p className="mb-4 text-[13px] leading-relaxed text-white/45">{bandParamDialogMeta.hint}</p>
-            <input
-              value={bandParamInput}
-              onChange={(e) => setBandParamInput(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  applyBandParamDialog();
-                }
-              }}
-              inputMode={bandParamDialogMeta.inputMode}
-              placeholder={bandParamDialogMeta.placeholder}
-              className="h-11 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none placeholder:text-white/30 focus:border-[#00FFF6]/40"
-              autoFocus
-            />
-            <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
-              <button
-                type="button"
-                className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
-                onClick={closeBandParamDialog}
-              >
-                {eqUi.cancel}
-              </button>
-              <button
-                type="button"
-                className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
-                onClick={applyBandParamDialog}
-              >
-                {eqUi.confirmButton ?? eqUi.save}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <BandParamDialog
+        open={!!bandParamDialog && !!bandParamDialogMeta}
+        meta={bandParamDialogMeta}
+        input={bandParamInput}
+        onInputChange={setBandParamInput}
+        onConfirm={applyBandParamDialog}
+        onClose={closeBandParamDialog}
+        eqUi={eqUi}
+      />
 
-      {isSaveBDialogOpen && (
-        <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4">
-          <div
-            className="w-full max-w-[420px] rounded-[14px] p-5"
-            style={{
-              background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
-              border: "1px solid rgba(255,255,255,0.12)",
-              boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-[18px] font-semibold leading-tight text-white/90">{eqUi.saveBTitle}</h3>
-              <button
-                type="button"
-                className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
-                onClick={() => setIsSaveBDialogOpen(false)}
-                aria-label={eqUi.closeDrawer}
-              >
-                <X size={20} />
-              </button>
-            </div>
+      <SaveBDialog
+        open={isSaveBDialogOpen}
+        presetName={saveBPresetName}
+        onNameChange={setSaveBPresetName}
+        onSave={() => void handleSaveBAsPreset()}
+        onClose={() => setIsSaveBDialogOpen(false)}
+        eqUi={eqUi}
+      />
 
-            <input
-              value={saveBPresetName}
-              onChange={(e) => setSaveBPresetName(e.target.value)}
-              className="h-11 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none placeholder:text-white/30 focus:border-white/15"
-              autoFocus
-            />
+      <AddPresetDialog
+        open={isAddPresetDialogOpen}
+        mode={addPresetMode}
+        copyName={copyPresetName}
+        flatName={flatPresetName}
+        onModeChange={setAddPresetMode}
+        onCopyNameChange={setCopyPresetName}
+        onFlatNameChange={setFlatPresetName}
+        onSave={handleSaveAddPreset}
+        onClose={() => setIsAddPresetDialogOpen(false)}
+        eqUi={eqUi}
+      />
 
-            <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
-              <button
-                type="button"
-                className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
-                onClick={() => setIsSaveBDialogOpen(false)}
-              >
-                {eqUi.cancel}
-              </button>
-              <button
-                type="button"
-                className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
-                onClick={() => void handleSaveBAsPreset()}
-              >
-                {eqUi.save}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <BatchEditDialog
+        open={isBatchEditDialogOpen}
+        text={batchEditText}
+        onChangeText={setBatchEditText}
+        onSave={handleSaveBatchEdit}
+        onClose={() => setIsBatchEditDialogOpen(false)}
+        eqUi={eqUi}
+      />
 
-      {isAddPresetDialogOpen && (
-        <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4">
-          <div
-            className="w-full max-w-[420px] rounded-[14px] p-5"
-            style={{
-              background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
-              border: "1px solid rgba(255,255,255,0.12)",
-              boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-[18px] font-semibold leading-tight text-white/90">{eqUi.addPresetTitle}</h3>
-              <button
-                type="button"
-                className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
-                onClick={() => setIsAddPresetDialogOpen(false)}
-                aria-label={eqUi.closeDrawer}
-              >
-                <X size={20} />
-              </button>
-            </div>
+      <BrandDrawer
+        key={brandDrawerKey}
+        open={isBrandDrawerOpen}
+        onClose={() => setIsBrandDrawerOpen(false)}
+        eqUi={eqUi}
+        onConfirm={async (brand, name, target, form) => {
+          const decoded = await fetchLuxsinAudioCurve(brand, name, target);
+          let parsed: unknown = decoded;
+          try {
+            parsed = JSON.parse(decoded);
+          } catch {
+            // Keep raw decoded text when payload isn't JSON.
+          }
 
-            <div className="space-y-3">
-              <label
-                className={cn(
-                  "flex cursor-pointer items-center gap-3 rounded-[12px] border border-white/10 p-3 transition-colors",
-                  addPresetMode === "copy" ? "bg-white/[0.06]" : "bg-white/[0.02] hover:bg-white/[0.04]",
-                )}
-              >
-                <input
-                  type="radio"
-                  name="add-preset-mode"
-                  checked={addPresetMode === "copy"}
-                  onChange={() => setAddPresetMode("copy")}
-                  className="h-4 w-4 shrink-0 accent-[#00FFF6]"
-                />
-                <input
-                  value={copyPresetName}
-                  onChange={(e) => setCopyPresetName(e.target.value)}
-                  onClick={(e) => e.stopPropagation()}
-                  className="h-10 min-w-0 flex-1 rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none ring-0 ring-offset-0 placeholder:text-white/30 focus:border-white/15 focus:ring-0 focus-visible:ring-0"
-                />
-              </label>
+          const parsedObj = parsed && typeof parsed === "object" ? (parsed as Record<string, unknown>) : null;
+          const parametricEqRaw = parsedObj?.parametric_eq;
+          if (!parametricEqRaw || typeof parametricEqRaw !== "object") return;
 
-              <label
-                className={cn(
-                  "flex cursor-pointer items-center gap-3 rounded-[12px] border border-white/10 p-3 transition-colors",
-                  addPresetMode === "flat" ? "bg-white/[0.06]" : "bg-white/[0.02] hover:bg-white/[0.04]",
-                )}
-              >
-                <input
-                  type="radio"
-                  name="add-preset-mode"
-                  checked={addPresetMode === "flat"}
-                  onChange={() => setAddPresetMode("flat")}
-                  className="h-4 w-4 shrink-0 accent-[#00FFF6]"
-                />
-                <input
-                  value={flatPresetName}
-                  onChange={(e) => setFlatPresetName(e.target.value)}
-                  onClick={(e) => e.stopPropagation()}
-                  className="h-10 min-w-0 flex-1 rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none ring-0 ring-offset-0 placeholder:text-white/30 focus:border-white/15 focus:ring-0 focus-visible:ring-0"
-                />
-              </label>
-            </div>
+          const parametricEq = parametricEqRaw as {
+            filters?: Array<{ type: string | number; fc: number; gain: number; q: number }>;
+            preamp?: number;
+          };
 
-            <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
-              <button
-                type="button"
-                className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
-                onClick={() => setIsAddPresetDialogOpen(false)}
-              >
-                {eqUi.cancel}
-              </button>
-              <button
-                type="button"
-                className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
-                onClick={handleSaveAddPreset}
-              >
-                {eqUi.save}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+          const filters = (Array.isArray(parametricEq.filters) ? parametricEq.filters : [])
+            .slice(0, 10)
+            .map((item) => ({
+              type: getFilterType(item.type),
+              fc: Number(Number(item.fc).toFixed(2)),
+              gain: Number(Number(item.gain).toFixed(2)),
+              q: Number(Number(item.q).toFixed(2)),
+            }));
 
-      {isBatchEditDialogOpen && (
-        <div className="fixed inset-0 z-[121] flex items-center justify-center bg-black/65 px-4">
-          <div
-            className="w-full max-w-[760px] rounded-[14px] p-5"
-            style={{
-              background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
-              border: "1px solid rgba(255,255,255,0.12)",
-              boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-[28px] text-white/90 font-semibold">{eqUi.batchEditTitle}</h3>
-              <button
-                type="button"
-                className="text-white/45 hover:text-white/75 transition-colors"
-                onClick={() => setIsBatchEditDialogOpen(false)}
-              >
-                <X size={20} />
-              </button>
-            </div>
-            <p className="mb-3 text-[13px] text-white/55">
-              {eqUi.batchEditHint}
-            </p>
-            <textarea
-              value={batchEditText}
-              onChange={(e) => setBatchEditText(e.target.value)}
-              spellCheck={false}
-              className="h-[360px] w-full resize-none overflow-auto rounded-[10px] border border-white/12 bg-[#15171b] p-3 font-mono text-[13px] leading-6 text-white/90 outline-none focus:border-[#00FFF6]/55"
-            />
-            <div className="mt-5 flex items-center justify-center gap-16">
-              <button
-                type="button"
-                className="px-5 py-2 rounded-full text-[24px] text-white/80 bg-[#3f4349] hover:bg-[#4a4f56] transition-colors"
-                onClick={() => setIsBatchEditDialogOpen(false)}
-              >
-                {eqUi.cancel}
-              </button>
-              <button
-                type="button"
-                className="px-5 py-2 rounded-full text-[24px] text-black bg-[#00FFF6] hover:brightness-95 transition-all"
-                onClick={handleSaveBatchEdit}
-              >
-                {eqUi.save}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+          const postPeq: PeqChangePayload = {
+            peqChange: {
+              name: `${brand} ${name}`,
+              brand,
+              model: name,
+              target,
+              ...(form ? { form } : {}),
+              filters,
+              preamp: Number(Number(parametricEq.preamp ?? 0).toFixed(2)),
+              autoPre: 0,
+              canDel: 1,
+            },
+          };
 
-      {isBrandDrawerOpen && (
-        <div className="fixed inset-0 z-[110] flex flex-col justify-end">
-          <button
-            type="button"
-            className="absolute inset-0 bg-black/55"
-            aria-label={eqUi.closeDrawer}
-            onClick={() => setIsBrandDrawerOpen(false)}
-          />
-          <div
-            className="relative z-10 flex h-[58dvh] flex-shrink-0 flex-col overflow-hidden rounded-t-[18px] bg-white shadow-[0_-8px_32px_rgba(0,0,0,0.35)]"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex shrink-0 items-center justify-center pt-2 pb-1">
-              <div className="h-1 w-10 rounded-full bg-black/15" />
-            </div>
-            <div className="flex shrink-0 items-stretch rounded-t-[12px] bg-[#2c2c2e] px-1 pt-1">
-              {(["brands", "models", "target"] as const).map((tab) => {
-                const active = brandDrawerTab === tab;
-                const label =
-                  tab === "brands" ? eqUi.tabBrands : tab === "models" ? eqUi.tabModels : eqUi.tabTarget;
-                return (
-                  <button
-                    key={tab}
-                    type="button"
-                    className={`flex-1 py-2.5 text-[14px] font-medium transition-colors rounded-t-[10px] ${
-                      active ? "bg-[#1c1c1e] text-white" : "text-white/55 hover:text-white/80"
-                    }`}
-                    onClick={() => setBrandDrawerTab(tab)}
-                  >
-                    {label}
-                  </button>
-                );
-              })}
-            </div>
+          await upgradePeqChange(postPeq);
+          const createdName = postPeq.peqChange.name;
+          if (api && !isDemoMode) {
+            const latest = await fetchEqSyncPeq(api, "addCatalogPreset");
+            applyPeqStateToUI(latest as { peq?: Array<{ name: string; filters?: any[] | string }>; peqSelect?: number });
+            const createdIndex = latest.peq?.findIndex((item) => item.name === createdName) ?? -1;
+            if (createdIndex >= 0) {
+              setHeadphoneIdx(createdIndex);
+              updateSetting({ peqSelect: createdIndex });
+            }
+          } else {
+            let nextIndex = 0;
+            setPeqItems((prev) => [
+              ...prev,
+              {
+                name: createdName,
+                brand,
+                model: name,
+                target,
+                ...(form ? { form } : {}),
+                filters: postPeq.peqChange.filters,
+                preamp: postPeq.peqChange.preamp ?? 0,
+                autoPre: postPeq.peqChange.autoPre ?? 0,
+                canDel: postPeq.peqChange.canDel ?? 1,
+              },
+            ]);
+            setHeadphoneModels((prev) => {
+              nextIndex = prev.length;
+              return [...prev, createdName];
+            });
+            setHeadphoneIdx(nextIndex);
+          }
+        }}
+      />
 
-            <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-white">
-              {brandDrawerTab === "brands" && (
-                <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-                  <div className="shrink-0 border-b border-black/8 px-3 py-2.5">
-                    <div className="flex items-center gap-2 rounded-[10px] border border-black/12 bg-[#f5f5f7] px-3 py-2">
-                      <Search size={18} className="shrink-0 text-black/35" />
-                      <input
-                        type="search"
-                        value={brandSearchQuery}
-                        onChange={(e) => setBrandSearchQuery(e.target.value)}
-                        placeholder={eqUi.searchPlaceholder}
-                        className="min-w-0 flex-1 bg-transparent text-[15px] text-black/80 outline-none placeholder:text-black/35"
-                      />
-                    </div>
-                  </div>
-                  <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
-                    {brandSearchQuery.trim() && catalogSearchLoading && (
-                      <div className="py-10 text-center text-[14px] text-black/45">{eqUi.searching}</div>
-                    )}
-                    {!!brandSearchQuery.trim() && !catalogSearchLoading && catalogSearchError && (
-                      <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogSearchError}</div>
-                    )}
-                    {!!brandSearchQuery.trim() &&
-                      !catalogSearchLoading &&
-                      !catalogSearchError &&
-                      catalogSearchResults.length === 0 && (
-                        <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noSearchResults}</div>
-                      )}
-                    {!!brandSearchQuery.trim() &&
-                      !catalogSearchLoading &&
-                      !catalogSearchError &&
-                      catalogSearchResults.map((item, idx) => (
-                        <button
-                          key={`${item.brandName}-${item.modelName}-${idx}`}
-                          type="button"
-                          className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left active:bg-black/[0.04] transition-colors"
-                          onClick={() => {
-                            setSelectedCatalogBrand(item.brandName);
-                            setSelectedCatalogModelFromSearch(item.modelName);
-                            setSelectedCatalogModelName(item.modelName);
-                            setSelectedCatalogModelForm(item.form);
-                            setSelectedCatalogTarget("");
-                            setCatalogModels([{ id: 0, name: item.modelName, ...(item.form ? { form: item.form } : {}) }]);
-                            setCatalogModelsLoading(false);
-                            setCatalogModelsError(null);
-                            setBrandDrawerTab("target");
-                          }}
-                        >
-                          <div className="text-[15px] text-black/85 font-medium">{item.modelName}</div>
-                          <div className="mt-0.5 text-[12px] text-black/50">{item.brandName}</div>
-                        </button>
-                      ))}
-                    {!brandSearchQuery.trim() && catalogBrandsLoading && (
-                      <div className="py-10 text-center text-[14px] text-black/45">{eqUi.loading}</div>
-                    )}
-                    {!brandSearchQuery.trim() && !catalogBrandsLoading && catalogBrandsError && (
-                      <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogBrandsError}</div>
-                    )}
-                    {!brandSearchQuery.trim() && !catalogBrandsLoading && !catalogBrandsError && filteredCatalogBrands.length === 0 && (
-                      <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noBrandMatch}</div>
-                    )}
-                    {!brandSearchQuery.trim() &&
-                      !catalogBrandsLoading &&
-                      !catalogBrandsError &&
-                      filteredCatalogBrands.map((b) => (
-                        <button
-                          key={b.id}
-                          type="button"
-                          className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left text-[16px] text-black/85 active:bg-black/[0.04] transition-colors"
-                          onClick={() => {
-                            setSelectedCatalogBrand(b.name);
-                            setSelectedCatalogModelFromSearch("");
-                            setSelectedCatalogModelName("");
-                            setSelectedCatalogModelForm(undefined);
-                            setSelectedCatalogTarget("");
-                            setBrandDrawerTab("models");
-                            void loadCatalogModels(b.name);
-                          }}
-                        >
-                          {b.name}
-                        </button>
-                      ))}
-                  </div>
-                </div>
-              )}
-              {brandDrawerTab === "models" && (
-                <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-                <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
-                  <div className="sticky top-0 z-10 border-b border-black/8 bg-white px-4 py-2.5 text-[13px] text-black/55">
-                    {eqUi.brandLabel}<span className="font-semibold text-black/80">{selectedCatalogBrand || "—"}</span>
-                    {selectedCatalogModelFromSearch && (
-                      <span className="ml-2 text-black/45">
-                        {eqUi.modelFromSearchLabel}
-                        {selectedCatalogModelFromSearch}
-                      </span>
-                    )}
-                  </div>
-                  {!selectedCatalogBrand && (
-                    <div className="py-10 text-center text-[14px] text-black/45">{eqUi.selectBrandFirst}</div>
-                  )}
-                  {!!selectedCatalogBrand && catalogModelsLoading && (
-                    <div className="py-10 text-center text-[14px] text-black/45">{eqUi.loading}</div>
-                  )}
-                  {!!selectedCatalogBrand && !catalogModelsLoading && catalogModelsError && (
-                    <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogModelsError}</div>
-                  )}
-                  {!!selectedCatalogBrand && !catalogModelsLoading && !catalogModelsError && catalogModels.length === 0 && (
-                    <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noModelsForBrand}</div>
-                  )}
-                  {!!selectedCatalogBrand &&
-                    !catalogModelsLoading &&
-                    !catalogModelsError &&
-                    catalogModels.map((m) => (
-                      <button
-                        key={`${m.id}-${m.name}`}
-                        type="button"
-                        className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left text-[16px] text-black/85 active:bg-black/[0.04] transition-colors"
-                        onClick={() => {
-                          setSelectedCatalogModelName(m.name);
-                          setSelectedCatalogModelForm(m.form);
-                          setSelectedCatalogTarget("");
-                          setBrandDrawerTab("target");
-                        }}
-                      >
-                        <div>{m.name}</div>
-                        {m.form && <div className="mt-0.5 text-[12px] text-black/50">{m.form}</div>}
-                      </button>
-                    ))}
-                </div>
-                </div>
-              )}
-              {brandDrawerTab === "target" && (
-                <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-                <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
-                  <div className="sticky top-0 z-10 border-b border-black/8 bg-white px-4 py-2.5 text-[13px] text-black/55 space-y-0.5">
-                    <div>
-                      {eqUi.targetBrand}
-                      <span className="font-semibold text-black/80">{selectedCatalogBrand || "—"}</span>
-                    </div>
-                    <div>
-                      {eqUi.targetModel}
-                      <span className="font-semibold text-black/80">{selectedCatalogModelName || "—"}</span>
-                    </div>
-                    <div>
-                      {eqUi.targetForm}
-                      <span className="font-semibold text-black/80">{selectedCatalogModelForm || eqUi.formAll}</span>
-                    </div>
-                  </div>
-                  <div className="px-5 pt-4 pb-3">
-                    <button
-                      type="button"
-                      disabled={!selectedCatalogTarget || isConfirmingTarget}
-                      className="w-full h-10 rounded-full text-[24px] leading-none transition-all disabled:cursor-not-allowed flex items-center justify-center gap-3"
-                      style={{
-                        background: selectedCatalogTarget && !isConfirmingTarget
-                          ? "linear-gradient(180deg, #6a6a6d 0%, #565659 100%)"
-                          : "linear-gradient(180deg, #8b8b8f 0%, #78787c 100%)",
-                        color: selectedCatalogTarget && !isConfirmingTarget ? "#00FFF6" : "rgba(255,255,255,0.55)",
-                        boxShadow: selectedCatalogTarget && !isConfirmingTarget
-                          ? "inset 0 1px 0 rgba(255,255,255,0.15)"
-                          : "inset 0 1px 0 rgba(255,255,255,0.08)",
-                        opacity: selectedCatalogTarget && !isConfirmingTarget ? 1 : 0.9,
-                      }}
-                      onClick={() => {
-                        const brand = selectedCatalogBrand;
-                        const name = selectedCatalogModelName;
-                        const target = selectedCatalogTarget;
-                        const form = selectedCatalogModelForm;
-                        void (async () => {
-                          setIsConfirmingTarget(true);
-                          try {
-                            const decoded = await fetchLuxsinAudioCurve(brand, name, target);
-                            let parsed: unknown = decoded;
-                            try {
-                              parsed = JSON.parse(decoded);
-                            } catch {
-                              // Keep raw decoded text when payload isn't JSON.
-                            }
+      <ShareDialog
+        key={shareDialogKey}
+        open={isShareDialogOpen}
+        onClose={() => setIsShareDialogOpen(false)}
+        peqItems={peqItems}
+        headphoneIdx={headphoneIdx}
+        eqUi={eqUi}
+        peqCardLabels={peqCardLabels}
+        onImportEq={(data) => {
+          // ── TODO: 伪代码 — 导入 EQ 到预设列表 ──
+          // if (!guardPeqPresetCapacity()) return;
+          // setPeqItems((prev) => [
+          //   ...prev,
+          //   {
+          //     name: data.name,
+          //     brand: data.brand,
+          //     model: data.model,
+          //     form: data.form,
+          //     filters: data.filters,
+          //     preamp: data.preamp,
+          //     autoPre: 0,
+          //     canDel: 1,
+          //   },
+          // ]);
+          // setHeadphoneIdx(peqItems.length);
+          // toast.success(eqUi.importSuccess);
 
-                            const parsedObj = parsed && typeof parsed === "object" ? (parsed as Record<string, unknown>) : null;
-                            const parametricEqRaw = parsedObj?.parametric_eq;
-                            if (!parametricEqRaw || typeof parametricEqRaw !== "object") return;
-
-                            const parametricEq = parametricEqRaw as {
-                              filters?: Array<{ type: string | number; fc: number; gain: number; q: number }>;
-                              preamp?: number;
-                            };
-
-                            const filters = (Array.isArray(parametricEq.filters) ? parametricEq.filters : [])
-                              .slice(0, 10)
-                              .map((item) => ({
-                                type: getFilterType(item.type),
-                                fc: Number(Number(item.fc).toFixed(2)),
-                                gain: Number(Number(item.gain).toFixed(2)),
-                                q: Number(Number(item.q).toFixed(2)),
-                              }));
-
-                            const postPeq: PeqChangePayload = {
-                              peqChange: {
-                                name: `${brand} ${name}`,
-                                brand,
-                                model: name,
-                                target,
-                                ...(form ? { form } : {}),
-                                filters,
-                                preamp: Number(Number(parametricEq.preamp ?? 0).toFixed(2)),
-                                autoPre: 0,
-                                canDel: 1,
-                              },
-                            };
-
-                            await upgradePeqChange(postPeq);
-                            const createdName = postPeq.peqChange.name;
-                            if (api && !isDemoMode) {
-                              const latest = await fetchEqSyncPeq(api, "addCatalogPreset");
-                              applyPeqStateToUI(latest as { peq?: Array<{ name: string; filters?: any[] | string }>; peqSelect?: number });
-                              const createdIndex = latest.peq?.findIndex((item) => item.name === createdName) ?? -1;
-                              if (createdIndex >= 0) {
-                                setHeadphoneIdx(createdIndex);
-                                updateSetting({ peqSelect: createdIndex });
-                              }
-                            } else {
-                              let nextIndex = 0;
-                              setPeqItems((prev) => [
-                                ...prev,
-                                {
-                                  name: createdName,
-                                  brand,
-                                  model: name,
-                                  target,
-                                  ...(form ? { form } : {}),
-                                  filters: postPeq.peqChange.filters,
-                                  preamp: postPeq.peqChange.preamp ?? 0,
-                                  autoPre: postPeq.peqChange.autoPre ?? 0,
-                                  canDel: postPeq.peqChange.canDel ?? 1,
-                                },
-                              ]);
-                              setHeadphoneModels((prev) => {
-                                nextIndex = prev.length;
-                                return [...prev, createdName];
-                              });
-                              setHeadphoneIdx(nextIndex);
-                            }
-
-                            setIsBrandDrawerOpen(false);
-                            toast.success(eqUi.toastNewEqOk);
-                          } catch {
-                            toast.error(eqUi.toastCurveFail);
-                          } finally {
-                            setIsConfirmingTarget(false);
-                          }
-                        })();
-                      }}
-                    >
-                      {isConfirmingTarget && (
-                        <span
-                          className="inline-block w-4 h-4 rounded-full border-2 border-white/40 border-t-[#00FFF6] animate-spin"
-                          aria-hidden="true"
-                        />
-                      )}
-                      {isConfirmingTarget ? eqUi.confirmLoading : eqUi.confirmButton}
-                    </button>
-                  </div>
-                  {!selectedCatalogModelName && (
-                    <div className="py-10 text-center text-[14px] text-black/45">{eqUi.selectModelFirst}</div>
-                  )}
-                  {!!selectedCatalogModelName && availableCatalogTargets.length === 0 && (
-                    <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noTargets}</div>
-                  )}
-                  {!!selectedCatalogModelName &&
-                    availableCatalogTargets.map((target) => {
-                      const active = selectedCatalogTarget === target.name;
-                      return (
-                        <button
-                          key={target.name}
-                          type="button"
-                          className="w-full border-b border-black/[0.06] px-4 py-3 text-left active:bg-black/[0.04] transition-colors"
-                          style={active ? { background: "rgba(0,255,246,0.14)" } : undefined}
-                          onClick={() => {
-                            setSelectedCatalogTarget(target.name);
-                            toast.success(eqInterp(eqUi.toastTargetSelected, { name: target.name }));
-                          }}
-                        >
-                          <div className="text-[15px] text-black/85 font-medium">{target.name}</div>
-                          <div className="mt-1 text-[12px] text-black/55">
-                            {eqInterp(eqUi.bassBoost, {
-                              fc: String(target.bassBoost.fc),
-                              q: String(target.bassBoost.q),
-                              gain: String(target.bassBoost.gain),
-                            })}
-                          </div>
-                        </button>
-                      );
-                    })}
-                </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* ── Share / Import EQ Dialog ── */}
-      {isShareDialogOpen && (
-        <div
-          className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
-          onClick={() => setIsShareDialogOpen(false)}
-        >
-          <div
-            className="w-full max-w-[420px] rounded-[14px] p-5"
-            style={{
-              background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
-              border: "1px solid rgba(255,255,255,0.12)",
-              boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* header */}
-            <div className="flex items-center justify-between mb-4">
-              {/* tab bar */}
-              <div className="flex gap-1 rounded-[10px] p-1" style={{ background: "rgba(44,44,46,0.8)" }}>
-                <button
-                  type="button"
-                  className={cn(
-                    "px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
-                    shareDialogTab === "share"
-                      ? "bg-[#00FFF6] text-black font-semibold"
-                      : "text-white/60 hover:text-white/80",
-                  )}
-                  onClick={() => setShareDialogTab("share")}
-                >
-                  {peqCardLabels.share}
-                </button>
-                <button
-                  type="button"
-                  className={cn(
-                    "px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
-                    shareDialogTab === "import"
-                      ? "bg-[#00FFF6] text-black font-semibold"
-                      : "text-white/60 hover:text-white/80",
-                  )}
-                  onClick={() => setShareDialogTab("import")}
-                >
-                  {eqUi.importTab}
-                </button>
-                <button
-                  type="button"
-                  className={cn(
-                    "px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
-                    shareDialogTab === "myShares"
-                      ? "bg-[#00FFF6] text-black font-semibold"
-                      : "text-white/60 hover:text-white/80",
-                  )}
-                  onClick={() => {
-                    setShareDialogTab("myShares");
-                    // 进入选项卡时调用查询分享列表接口
-                    if (mySharesList.length === 0 && !mySharesLoading) {
-                      void (async () => {
-                        setMySharesLoading(true);
-                        try {
-                          // ── TODO: 伪代码 — 调用查询我的分享列表接口 ──
-                          // const res = await fetch("/api/eq/share/list");
-                          // if (!res.ok) {
-                          //   toast.error(eqUi.mySharesLoadFail);
-                          //   return;
-                          // }
-                          // const data = await res.json();
-                          // setMySharesList(data.list);
-
-                          // 模拟接口延迟
-                          await new Promise((r) => setTimeout(r, 600));
-                          // 模拟返回分享列表
-                          setMySharesList([
-                            { code: "AK7NR", name: "Sennheiser HD 600 (AutoEQ)" },
-                            { code: "P3WQM", name: "Beyerdynamic DT 880" },
-                            { code: "Z5XKL", name: "Hifiman HE400i" },
-                          ]);
-                        } catch {
-                          // TODO: 错误处理
-                        } finally {
-                          setMySharesLoading(false);
-                        }
-                      })();
-                    }
-                  }}
-                >
-                  {eqUi.mySharesTab}
-                </button>
-              </div>
-              <button
-                type="button"
-                className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
-                onClick={() => setIsShareDialogOpen(false)}
-              >
-                <X size={20} />
-              </button>
-            </div>
-
-            {/* ── Tab: Share EQ ── */}
-            {shareDialogTab === "share" && (
-              <>
-                {/* hint */}
-                <p className="mb-3 text-[13px] leading-relaxed text-white/45">{eqUi.shareSelectHint}</p>
-
-                {/* EQ preset list */}
-                <div
-                  className="rounded-[10px] overflow-hidden max-h-48 overflow-y-auto mb-4"
-                  style={{
-                    background: "rgba(10,12,16,0.98)",
-                    border: "1px solid rgba(0,255,246,0.35)",
-                    boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
-                  }}
-                >
-                  {peqItems.length === 0 && (
-                    <div className="py-6 text-center text-[13px] text-white/30">—</div>
-                  )}
-                  {peqItems.map((item, idx) => {
-                    const active = idx === shareSelectedIdx;
-                    return (
-                      <button
-                        key={`${item.name}-${idx}`}
-                        type="button"
-                        className={`w-full px-3 py-2.5 text-left text-[13px] transition-colors truncate border-b border-white/[0.06] last:border-b-0 ${
-                          active ? "text-black font-semibold" : "text-white/90 hover:bg-white/10"
-                        }`}
-                        style={active ? { background: "#00FFF6" } : undefined}
-                        title={item.name}
-                        onClick={() => setShareSelectedIdx(idx)}
-                      >
-                        {item.name}
-                      </button>
-                    );
-                  })}
-                </div>
-
-                {/* confirm button */}
-                <button
-                  type="button"
-                  disabled={shareGenerating || peqItems.length === 0}
-                  className={cn(
-                    "w-full rounded-full py-2.5 text-[15px] font-semibold text-black transition-all active:scale-[0.98]",
-                    shareGenerating || peqItems.length === 0
-                      ? "bg-[#00FFF6]/40 cursor-not-allowed"
-                      : "bg-[#00FFF6] hover:brightness-95",
-                  )}
-                  onClick={async () => {
-                    if (shareGenerating) return;
-                    setShareGenerating(true);
-                    setShareCode(null);
-                    try {
-                      // ── TODO: 伪代码 — 调用分享接口 ──
-                      // const selectedPeq = peqItems[shareSelectedIdx];
-                      // const res = await fetch("/api/eq/share", {
-                      //   method: "POST",
-                      //   headers: { "Content-Type": "application/json" },
-                      //   body: JSON.stringify({
-                      //     brand: selectedPeq.brand,
-                      //     model: selectedPeq.model,
-                      //     target: selectedPeq.form,
-                      //     filters: selectedPeq.filters,
-                      //     preamp: selectedPeq.preamp,
-                      //   }),
-                      // });
-                      // const data = await res.json();
-                      // setShareCode(data.shareCode);
-
-                      // 模拟接口延迟
-                      await new Promise((r) => setTimeout(r, 800));
-                      // 模拟返回 5 位随机分享码
-                      const fakeCode = Array.from(
-                        { length: 5 },
-                        () => "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"[Math.floor(Math.random() * 32)],
-                      ).join("");
-                      setShareCode(fakeCode);
-                    } catch {
-                      // TODO: 错误处理
-                    } finally {
-                      setShareGenerating(false);
-                    }
-                  }}
-                >
-                  {shareGenerating ? (
-                    <span className="flex items-center justify-center gap-2">
-                      <Loader2 size={16} className="animate-spin" />
-                      {eqUi.shareGenerating}
-                    </span>
-                  ) : (
-                    eqUi.shareConfirm
-                  )}
-                </button>
-
-                {/* share code display */}
-                {shareCode && (
-                  <div className="mt-5">
-                    <p className="mb-2 text-[12px] text-white/40 font-medium">{eqUi.shareCodeLabel}</p>
-                    <div className="flex items-center gap-2">
-                      <div className="flex flex-1 gap-1.5 justify-center">
-                        {shareCode.split("").map((ch, i) => (
-                          <div
-                            key={i}
-                            className="w-11 h-12 rounded-[8px] flex items-center justify-center text-[18px] font-bold tracking-wider text-[#00FFF6]"
-                            style={{
-                              background: "rgba(0,255,246,0.08)",
-                              border: "1px solid rgba(0,255,246,0.25)",
-                            }}
-                          >
-                            {ch}
-                          </div>
-                        ))}
-                      </div>
-                      <button
-                        type="button"
-                        className="shrink-0 w-9 h-9 rounded-[8px] flex items-center justify-center text-[#00FFF6] active:scale-95 transition-transform"
-                        style={{
-                          background: "rgba(0,255,246,0.12)",
-                          border: "1px solid rgba(0,255,246,0.25)",
-                        }}
-                        onClick={async () => {
-                          try {
-                            await navigator.clipboard.writeText(shareCode);
-                            toast.success(eqUi.shareCopied);
-                          } catch {
-                            const ta = document.createElement("textarea");
-                            ta.value = shareCode;
-                            ta.style.position = "fixed";
-                            ta.style.opacity = "0";
-                            document.body.appendChild(ta);
-                            ta.select();
-                            document.execCommand("copy");
-                            document.body.removeChild(ta);
-                            toast.success(eqUi.shareCopied);
-                          }
-                        }}
-                      >
-                        <Copy size={16} />
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </>
-            )}
-
-            {/* ── Tab: Import EQ ── */}
-            {shareDialogTab === "import" && (
-              <>
-                {/* hint */}
-                <p className="mb-3 text-[13px] leading-relaxed text-white/45">{eqUi.importCodeHint}</p>
-
-                {/* 5 input boxes */}
-                <div className="flex gap-2 justify-center mb-4">
-                  {importCodeInputs.map((ch, i) => (
-                    <input
-                      key={i}
-                      value={ch}
-                      inputMode="text"
-                      maxLength={1}
-                      autoCapitalize="characters"
-                      autoCorrect="off"
-                      className="w-11 h-12 rounded-[8px] text-center text-[18px] font-bold tracking-wider text-[#00FFF6] bg-transparent outline-none uppercase"
-                      style={{
-                        background: "rgba(0,255,246,0.06)",
-                        border: "1px solid rgba(0,255,246,0.25)",
-                        caretColor: "#00FFF6",
-                      }}
-                      onChange={(e) => {
-                        const val = e.target.value.replace(/[^a-zA-Z0-9]/g, "").slice(-1).toUpperCase();
-                        const next = [...importCodeInputs];
-                        next[i] = val;
-                        setImportCodeInputs(next);
-                        setImportedEqData(null);
-                        // auto-focus next box
-                        if (val && i < 4) {
-                          const el = e.target.nextElementSibling as HTMLInputElement | null;
-                          el?.focus();
-                        }
-                      }}
-                      onKeyDown={(e) => {
-                        // backspace: clear current & focus previous
-                        if (e.key === "Backspace" && !importCodeInputs[i] && i > 0) {
-                          const next = [...importCodeInputs];
-                          next[i - 1] = "";
-                          setImportCodeInputs(next);
-                          setImportedEqData(null);
-                          const prev = (e.target as HTMLElement).previousElementSibling as HTMLInputElement | null;
-                          prev?.focus();
-                        }
-                      }}
-                      onPaste={(e) => {
-                        e.preventDefault();
-                        const text = (e.clipboardData.getData("text") || "").replace(/[^a-zA-Z0-9]/g, "").toUpperCase().slice(0, 5);
-                        if (!text) return;
-                        const next = [...importCodeInputs];
-                        for (let j = 0; j < 5; j++) {
-                          next[j] = text[j] ?? "";
-                        }
-                        setImportCodeInputs(next);
-                        setImportedEqData(null);
-                        // focus last filled or last box
-                        const focusIdx = Math.min(text.length, 4);
-                        const inputs = (e.target as HTMLElement).parentElement?.querySelectorAll("input");
-                        (inputs?.[focusIdx] as HTMLInputElement | undefined)?.focus();
-                      }}
-                      ref={(el) => {
-                        // stash ref for focus management if needed later
-                      }}
-                    />
-                  ))}
-                </div>
-
-                {/* query button */}
-                <button
-                  type="button"
-                  disabled={importQuerying || importCodeInputs.some((c) => !c)}
-                  className={cn(
-                    "w-full rounded-full py-2.5 text-[15px] font-semibold text-black transition-all active:scale-[0.98]",
-                    importQuerying || importCodeInputs.some((c) => !c)
-                      ? "bg-[#00FFF6]/40 cursor-not-allowed"
-                      : "bg-[#00FFF6] hover:brightness-95",
-                  )}
-                  onClick={async () => {
-                    if (importQuerying) return;
-                    const code = importCodeInputs.join("");
-                    setImportQuerying(true);
-                    setImportedEqData(null);
-                    try {
-                      // ── TODO: 伪代码 — 调用导入查询接口 ──
-                      // const res = await fetch(`/api/eq/share/${code}`);
-                      // if (!res.ok) {
-                      //   toast.error(eqUi.importCodeNotFound);
-                      //   return;
-                      // }
-                      // const data = await res.json();
-                      // setImportedEqData({
-                      //   name: data.name,
-                      //   brand: data.brand,
-                      //   model: data.model,
-                      //   form: data.target,
-                      //   filters: data.filters,
-                      //   preamp: data.preamp,
-                      // });
-
-                      // 模拟接口延迟
-                      await new Promise((r) => setTimeout(r, 600));
-                      // 模拟返回 EQ 数据
-                      setImportedEqData({
-                        name: "Sennheiser HD 600 (AutoEQ)",
-                        brand: "Sennheiser",
-                        model: "HD 600",
-                        form: "over-ear",
-                        filters: [],
-                        preamp: -5.2,
-                      });
-                    } catch {
-                      // TODO: 错误处理
-                    } finally {
-                      setImportQuerying(false);
-                    }
-                  }}
-                >
-                  {importQuerying ? (
-                    <span className="flex items-center justify-center gap-2">
-                      <Loader2 size={16} className="animate-spin" />
-                      {eqUi.importQuerying}
-                    </span>
-                  ) : (
-                    eqUi.importQuery
-                  )}
-                </button>
-
-                {/* imported EQ result */}
-                {importedEqData && (
-                  <div className="mt-4 rounded-[10px] p-3" style={{ background: "rgba(0,255,246,0.06)", border: "1px solid rgba(0,255,246,0.2)" }}>
-                    <div className="flex items-center justify-between">
-                      <div className="min-w-0 flex-1">
-                        <p className="text-[12px] text-white/40 font-medium mb-0.5">{eqUi.importEqName}</p>
-                        <p className="text-[14px] text-white/90 font-semibold truncate">{importedEqData.name}</p>
-                      </div>
-                      <button
-                        type="button"
-                        className="shrink-0 ml-3 rounded-full px-4 py-2 text-[13px] font-semibold text-black bg-[#00FFF6] hover:brightness-95 active:scale-[0.98] transition-all"
-                        onClick={() => {
-                          // ── TODO: 伪代码 — 导入 EQ 到预设列表 ──
-                          // if (!guardPeqPresetCapacity()) return;
-                          // setPeqItems((prev) => [
-                          //   ...prev,
-                          //   {
-                          //     name: importedEqData.name,
-                          //     brand: importedEqData.brand,
-                          //     model: importedEqData.model,
-                          //     form: importedEqData.form,
-                          //     filters: importedEqData.filters,
-                          //     preamp: importedEqData.preamp,
-                          //     autoPre: 0,
-                          //     canDel: 1,
-                          //   },
-                          // ]);
-                          // setHeadphoneIdx(peqItems.length);
-                          // setIsShareDialogOpen(false);
-                          // toast.success(eqUi.importSuccess);
-
-                          // 模拟导入
-                          toast.success(eqUi.importSuccess);
-                          setIsShareDialogOpen(false);
-                        }}
-                      >
-                        {eqUi.importButton}
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </>
-            )}
-
-            {/* ── Tab: My Shares ── */}
-            {shareDialogTab === "myShares" && (
-              <>
-                {mySharesLoading && mySharesList.length === 0 ? (
-                  <div className="flex items-center justify-center py-10 gap-2 text-white/50">
-                    <Loader2 size={16} className="animate-spin" />
-                    <span className="text-[13px]">{eqUi.mySharesLoading}</span>
-                  </div>
-                ) : mySharesList.length === 0 ? (
-                  <div className="py-10 text-center text-[13px] text-white/30">{eqUi.mySharesEmpty}</div>
-                ) : (
-                  <div
-                    className="rounded-[10px] overflow-hidden max-h-64 overflow-y-auto"
-                    style={{
-                      background: "rgba(10,12,16,0.98)",
-                      border: "1px solid rgba(0,255,246,0.35)",
-                      boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
-                    }}
-                  >
-                    {mySharesList.map((item, idx) => (
-                      <div
-                        key={`${item.code}-${idx}`}
-                        className="flex items-center gap-3 px-3 py-2.5 border-b border-white/[0.06] last:border-b-0"
-                      >
-                        {/* share code */}
-                        <div
-                          className="shrink-0 flex gap-0.5"
-                          title={eqUi.mySharesCode}
-                        >
-                          {item.code.split("").map((ch, ci) => (
-                            <span
-                              key={ci}
-                              className="w-[18px] h-[22px] rounded-[4px] flex items-center justify-center text-[11px] font-bold text-[#00FFF6]"
-                              style={{ background: "rgba(0,255,246,0.1)", border: "1px solid rgba(0,255,246,0.2)" }}
-                            >
-                              {ch}
-                            </span>
-                          ))}
-                        </div>
-                        {/* EQ name */}
-                        <div className="min-w-0 flex-1 truncate text-[13px] text-white/85">{item.name}</div>
-                        {/* copy code button */}
-                        <button
-                          type="button"
-                          className="shrink-0 w-7 h-7 rounded-[6px] flex items-center justify-center text-[#00FFF6]/70 active:scale-95 transition-transform"
-                          style={{ background: "rgba(0,255,246,0.08)", border: "1px solid rgba(0,255,246,0.15)" }}
-                          onClick={async () => {
-                            try {
-                              await navigator.clipboard.writeText(item.code);
-                              toast.success(eqUi.shareCopied);
-                            } catch {
-                              const ta = document.createElement("textarea");
-                              ta.value = item.code;
-                              ta.style.position = "fixed";
-                              ta.style.opacity = "0";
-                              document.body.appendChild(ta);
-                              ta.select();
-                              document.execCommand("copy");
-                              document.body.removeChild(ta);
-                              toast.success(eqUi.shareCopied);
-                            }
-                          }}
-                        >
-                          <Copy size={13} />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-      )}
+          // 模拟导入
+          toast.success(eqUi.importSuccess);
+          setIsShareDialogOpen(false);
+        }}
+      />
 
       <BottomNav />
     </div>
diff --git a/client/src/pages/eq/components/AddPresetDialog.tsx b/client/src/pages/eq/components/AddPresetDialog.tsx
new file mode 100644
index 0000000..cf12390
--- /dev/null
+++ b/client/src/pages/eq/components/AddPresetDialog.tsx
@@ -0,0 +1,115 @@
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { PeqEqUi } from "../constants";
+
+export function AddPresetDialog({
+  open,
+  mode,
+  copyName,
+  flatName,
+  onModeChange,
+  onCopyNameChange,
+  onFlatNameChange,
+  onSave,
+  onClose,
+  eqUi,
+}: {
+  open: boolean;
+  mode: "copy" | "flat";
+  copyName: string;
+  flatName: string;
+  onModeChange: (m: "copy" | "flat") => void;
+  onCopyNameChange: (v: string) => void;
+  onFlatNameChange: (v: string) => void;
+  onSave: () => void;
+  onClose: () => void;
+  eqUi: PeqEqUi;
+}) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4">
+      <div
+        className="w-full max-w-[420px] rounded-[14px] p-5"
+        style={{
+          background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-[18px] font-semibold leading-tight text-white/90">{eqUi.addPresetTitle}</h3>
+          <button
+            type="button"
+            className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
+            onClick={onClose}
+            aria-label={eqUi.closeDrawer}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="space-y-3">
+          <label
+            className={cn(
+              "flex cursor-pointer items-center gap-3 rounded-[12px] border border-white/10 p-3 transition-colors",
+              mode === "copy" ? "bg-white/[0.06]" : "bg-white/[0.02] hover:bg-white/[0.04]",
+            )}
+          >
+            <input
+              type="radio"
+              name="add-preset-mode"
+              checked={mode === "copy"}
+              onChange={() => onModeChange("copy")}
+              className="h-4 w-4 shrink-0 accent-[#00FFF6]"
+            />
+            <input
+              value={copyName}
+              onChange={(e) => onCopyNameChange(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+              className="h-10 min-w-0 flex-1 rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none ring-0 ring-offset-0 placeholder:text-white/30 focus:border-white/15 focus:ring-0 focus-visible:ring-0"
+            />
+          </label>
+
+          <label
+            className={cn(
+              "flex cursor-pointer items-center gap-3 rounded-[12px] border border-white/10 p-3 transition-colors",
+              mode === "flat" ? "bg-white/[0.06]" : "bg-white/[0.02] hover:bg-white/[0.04]",
+            )}
+          >
+            <input
+              type="radio"
+              name="add-preset-mode"
+              checked={mode === "flat"}
+              onChange={() => onModeChange("flat")}
+              className="h-4 w-4 shrink-0 accent-[#00FFF6]"
+            />
+            <input
+              value={flatName}
+              onChange={(e) => onFlatNameChange(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+              className="h-10 min-w-0 flex-1 rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none ring-0 ring-offset-0 placeholder:text-white/30 focus:border-white/15 focus:ring-0 focus-visible:ring-0"
+            />
+          </label>
+        </div>
+
+        <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
+          <button
+            type="button"
+            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
+            onClick={onClose}
+          >
+            {eqUi.cancel}
+          </button>
+          <button
+            type="button"
+            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
+            onClick={onSave}
+          >
+            {eqUi.save}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/eq/components/BandParamDialog.tsx b/client/src/pages/eq/components/BandParamDialog.tsx
new file mode 100644
index 0000000..5e31c63
--- /dev/null
+++ b/client/src/pages/eq/components/BandParamDialog.tsx
@@ -0,0 +1,89 @@
+import { X } from "lucide-react";
+import type { PeqEqUi } from "../constants";
+
+type BandParamDialogMeta = {
+  title: string;
+  hint: string;
+  placeholder: string;
+  inputMode: "decimal" | "numeric" | "text";
+  rangeMessages: { invalid: string; outOfRange: string };
+};
+
+export function BandParamDialog({
+  open,
+  meta,
+  input,
+  onInputChange,
+  onConfirm,
+  onClose,
+  eqUi,
+}: {
+  open: boolean;
+  meta: BandParamDialogMeta | null;
+  input: string;
+  onInputChange: (v: string) => void;
+  onConfirm: () => void;
+  onClose: () => void;
+  eqUi: PeqEqUi;
+}) {
+  if (!open || !meta) return null;
+  return (
+    <div
+      className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-[420px] rounded-[14px] p-5"
+        style={{
+          background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-[18px] font-semibold leading-tight text-white/90">{meta.title}</h3>
+          <button
+            type="button"
+            className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
+            onClick={onClose}
+            aria-label={eqUi.closeDrawer}
+          >
+            <X size={20} />
+          </button>
+        </div>
+        <p className="mb-4 text-[13px] leading-relaxed text-white/45">{meta.hint}</p>
+        <input
+          value={input}
+          onChange={(e) => onInputChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              onConfirm();
+            }
+          }}
+          inputMode={meta.inputMode}
+          placeholder={meta.placeholder}
+          className="h-11 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none placeholder:text-white/30 focus:border-[#00FFF6]/40"
+          autoFocus
+        />
+        <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
+          <button
+            type="button"
+            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
+            onClick={onClose}
+          >
+            {eqUi.cancel}
+          </button>
+          <button
+            type="button"
+            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
+            onClick={onConfirm}
+          >
+            {eqUi.confirmButton ?? eqUi.save}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/eq/components/BatchEditDialog.tsx b/client/src/pages/eq/components/BatchEditDialog.tsx
new file mode 100644
index 0000000..8bd18af
--- /dev/null
+++ b/client/src/pages/eq/components/BatchEditDialog.tsx
@@ -0,0 +1,69 @@
+import { X } from "lucide-react";
+import type { PeqEqUi } from "../constants";
+
+export function BatchEditDialog({
+  open,
+  text,
+  onChangeText,
+  onSave,
+  onClose,
+  eqUi,
+}: {
+  open: boolean;
+  text: string;
+  onChangeText: (v: string) => void;
+  onSave: () => void;
+  onClose: () => void;
+  eqUi: PeqEqUi;
+}) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-[121] flex items-center justify-center bg-black/65 px-4">
+      <div
+        className="w-full max-w-[760px] rounded-[14px] p-5"
+        style={{
+          background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-[28px] text-white/90 font-semibold">{eqUi.batchEditTitle}</h3>
+          <button
+            type="button"
+            className="text-white/45 hover:text-white/75 transition-colors"
+            onClick={onClose}
+          >
+            <X size={20} />
+          </button>
+        </div>
+        <p className="mb-3 text-[13px] text-white/55">
+          {eqUi.batchEditHint}
+        </p>
+        <textarea
+          value={text}
+          onChange={(e) => onChangeText(e.target.value)}
+          spellCheck={false}
+          className="h-[360px] w-full resize-none overflow-auto rounded-[10px] border border-white/12 bg-[#15171b] p-3 font-mono text-[13px] leading-6 text-white/90 outline-none focus:border-[#00FFF6]/55"
+        />
+        <div className="mt-5 flex items-center justify-center gap-16">
+          <button
+            type="button"
+            className="px-5 py-2 rounded-full text-[24px] text-white/80 bg-[#3f4349] hover:bg-[#4a4f56] transition-colors"
+            onClick={onClose}
+          >
+            {eqUi.cancel}
+          </button>
+          <button
+            type="button"
+            className="px-5 py-2 rounded-full text-[24px] text-black bg-[#00FFF6] hover:brightness-95 transition-all"
+            onClick={onSave}
+          >
+            {eqUi.save}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/eq/components/BrandDrawer.tsx b/client/src/pages/eq/components/BrandDrawer.tsx
new file mode 100644
index 0000000..8afe73a
--- /dev/null
+++ b/client/src/pages/eq/components/BrandDrawer.tsx
@@ -0,0 +1,417 @@
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { Search } from "lucide-react";
+import { toast } from "sonner";
+import {
+  fetchLuxsinAudioBrands,
+  fetchLuxsinAudioModelList,
+  fetchLuxsinAudioModels,
+  type LuxsinAudioBrand,
+  type LuxsinAudioModelListItem,
+  type LuxsinAudioModel,
+} from "@/lib/luxsinApi";
+import { CATALOG_TARGETS } from "../constants";
+import type { PeqEqUi } from "../constants";
+import { eqInterp } from "../utils";
+
+type BrandDrawerTab = "brands" | "models" | "target";
+
+export function BrandDrawer({
+  open,
+  onClose,
+  eqUi,
+  onConfirm,
+}: {
+  open: boolean;
+  onClose: () => void;
+  eqUi: PeqEqUi;
+  onConfirm: (brand: string, name: string, target: string, form?: string) => Promise<void>;
+}) {
+  const [brandDrawerTab, setBrandDrawerTab] = useState<BrandDrawerTab>("brands");
+  const [brandSearchQuery, setBrandSearchQuery] = useState("");
+  const [catalogBrands, setCatalogBrands] = useState<LuxsinAudioBrand[]>([]);
+  const [catalogBrandsLoading, setCatalogBrandsLoading] = useState(false);
+  const [catalogBrandsError, setCatalogBrandsError] = useState<string | null>(null);
+  const [catalogSearchResults, setCatalogSearchResults] = useState<LuxsinAudioModelListItem[]>([]);
+  const [catalogSearchLoading, setCatalogSearchLoading] = useState(false);
+  const [catalogSearchError, setCatalogSearchError] = useState<string | null>(null);
+  const [selectedCatalogBrand, setSelectedCatalogBrand] = useState<string>("");
+  const [catalogModels, setCatalogModels] = useState<LuxsinAudioModel[]>([]);
+  const [catalogModelsLoading, setCatalogModelsLoading] = useState(false);
+  const [catalogModelsError, setCatalogModelsError] = useState<string | null>(null);
+  const [selectedCatalogModelFromSearch, setSelectedCatalogModelFromSearch] = useState<string>("");
+  const [selectedCatalogModelName, setSelectedCatalogModelName] = useState("");
+  const [selectedCatalogModelForm, setSelectedCatalogModelForm] = useState<string | undefined>(undefined);
+  const [selectedCatalogTarget, setSelectedCatalogTarget] = useState<string>("");
+  const [isConfirmingTarget, setIsConfirmingTarget] = useState(false);
+
+  /* ── Derived data ── */
+  const filteredCatalogBrands = useMemo(() => {
+    const q = brandSearchQuery.trim().toLowerCase();
+    if (!q) return catalogBrands;
+    return catalogBrands.filter((b) => b.name.toLowerCase().includes(q));
+  }, [catalogBrands, brandSearchQuery]);
+
+  const availableCatalogTargets = useMemo(() => {
+    if (selectedCatalogModelForm === "in-ear") {
+      return CATALOG_TARGETS.filter((item) => item.ear === "in" || item.ear === "all");
+    }
+    if (selectedCatalogModelForm === "over-ear") {
+      return CATALOG_TARGETS.filter((item) => item.ear === "over" || item.ear === "all");
+    }
+    return CATALOG_TARGETS;
+  }, [selectedCatalogModelForm]);
+
+  /* ── API calls ── */
+  const loadCatalogBrands = useCallback(async () => {
+    setCatalogBrandsLoading(true);
+    setCatalogBrandsError(null);
+    try {
+      const list = await fetchLuxsinAudioBrands();
+      const sorted = [...list].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
+      setCatalogBrands(sorted);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "加载失败";
+      setCatalogBrandsError(msg);
+      toast.error(eqUi.toastBrandsFail);
+    } finally {
+      setCatalogBrandsLoading(false);
+    }
+  }, [eqUi]);
+
+  const searchCatalogByKeyword = useCallback(async (keyword: string) => {
+    const q = keyword.trim();
+    if (!q) {
+      setCatalogSearchResults([]);
+      setCatalogSearchError(null);
+      setCatalogSearchLoading(false);
+      return;
+    }
+    setCatalogSearchLoading(true);
+    setCatalogSearchError(null);
+    try {
+      const list = await fetchLuxsinAudioModelList(q, 1000);
+      setCatalogSearchResults(list);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "搜索失败";
+      setCatalogSearchError(msg);
+      setCatalogSearchResults([]);
+    } finally {
+      setCatalogSearchLoading(false);
+    }
+  }, []);
+
+  const loadCatalogModels = useCallback(async (brandName: string) => {
+    setSelectedCatalogModelFromSearch("");
+    setCatalogModelsLoading(true);
+    setCatalogModelsError(null);
+    try {
+      const list = await fetchLuxsinAudioModels(brandName);
+      const sorted = [...list].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
+      setCatalogModels(sorted);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "加载失败";
+      setCatalogModelsError(msg);
+      toast.error(eqUi.toastModelsFail);
+    } finally {
+      setCatalogModelsLoading(false);
+    }
+  }, [eqUi]);
+
+  /* ── Effects ── */
+  // Auto-load brands when drawer opens
+  useEffect(() => {
+    if (!open) return;
+    void loadCatalogBrands();
+  }, [open, loadCatalogBrands]);
+
+  // Search debounce
+  useEffect(() => {
+    if (!open || brandDrawerTab !== "brands") return;
+    const timer = window.setTimeout(() => {
+      void searchCatalogByKeyword(brandSearchQuery);
+    }, 260);
+    return () => window.clearTimeout(timer);
+  }, [open, brandDrawerTab, brandSearchQuery, searchCatalogByKeyword]);
+
+  // Escape key
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  // Body overflow lock
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[110] flex flex-col justify-end">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/55"
+        aria-label={eqUi.closeDrawer}
+        onClick={onClose}
+      />
+      <div
+        className="relative z-10 flex h-[58dvh] flex-shrink-0 flex-col overflow-hidden rounded-t-[18px] bg-white shadow-[0_-8px_32px_rgba(0,0,0,0.35)]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex shrink-0 items-center justify-center pt-2 pb-1">
+          <div className="h-1 w-10 rounded-full bg-black/15" />
+        </div>
+        <div className="flex shrink-0 items-stretch rounded-t-[12px] bg-[#2c2c2e] px-1 pt-1">
+          {(["brands", "models", "target"] as const).map((tab) => {
+            const active = brandDrawerTab === tab;
+            const label =
+              tab === "brands" ? eqUi.tabBrands : tab === "models" ? eqUi.tabModels : eqUi.tabTarget;
+            return (
+              <button
+                key={tab}
+                type="button"
+                className={`flex-1 py-2.5 text-[14px] font-medium transition-colors rounded-t-[10px] ${
+                  active ? "bg-[#1c1c1e] text-white" : "text-white/55 hover:text-white/80"
+                }`}
+                onClick={() => setBrandDrawerTab(tab)}
+              >
+                {label}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-white">
+          {brandDrawerTab === "brands" && (
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+              <div className="shrink-0 border-b border-black/8 px-3 py-2.5">
+                <div className="flex items-center gap-2 rounded-[10px] border border-black/12 bg-[#f5f5f7] px-3 py-2">
+                  <Search size={18} className="shrink-0 text-black/35" />
+                  <input
+                    type="search"
+                    value={brandSearchQuery}
+                    onChange={(e) => setBrandSearchQuery(e.target.value)}
+                    placeholder={eqUi.searchPlaceholder}
+                    className="min-w-0 flex-1 bg-transparent text-[15px] text-black/80 outline-none placeholder:text-black/35"
+                  />
+                </div>
+              </div>
+              <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
+                {brandSearchQuery.trim() && catalogSearchLoading && (
+                  <div className="py-10 text-center text-[14px] text-black/45">{eqUi.searching}</div>
+                )}
+                {!!brandSearchQuery.trim() && !catalogSearchLoading && catalogSearchError && (
+                  <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogSearchError}</div>
+                )}
+                {!!brandSearchQuery.trim() &&
+                  !catalogSearchLoading &&
+                  !catalogSearchError &&
+                  catalogSearchResults.length === 0 && (
+                    <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noSearchResults}</div>
+                  )}
+                {!!brandSearchQuery.trim() &&
+                  !catalogSearchLoading &&
+                  !catalogSearchError &&
+                  catalogSearchResults.map((item, idx) => (
+                    <button
+                      key={`${item.brandName}-${item.modelName}-${idx}`}
+                      type="button"
+                      className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left active:bg-black/[0.04] transition-colors"
+                      onClick={() => {
+                        setSelectedCatalogBrand(item.brandName);
+                        setSelectedCatalogModelFromSearch(item.modelName);
+                        setSelectedCatalogModelName(item.modelName);
+                        setSelectedCatalogModelForm(item.form);
+                        setSelectedCatalogTarget("");
+                        setCatalogModels([{ id: 0, name: item.modelName, ...(item.form ? { form: item.form } : {}) }]);
+                        setCatalogModelsLoading(false);
+                        setCatalogModelsError(null);
+                        setBrandDrawerTab("target");
+                      }}
+                    >
+                      <div className="text-[15px] text-black/85 font-medium">{item.modelName}</div>
+                      <div className="mt-0.5 text-[12px] text-black/50">{item.brandName}</div>
+                    </button>
+                  ))}
+                {!brandSearchQuery.trim() && catalogBrandsLoading && (
+                  <div className="py-10 text-center text-[14px] text-black/45">{eqUi.loading}</div>
+                )}
+                {!brandSearchQuery.trim() && !catalogBrandsLoading && catalogBrandsError && (
+                  <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogBrandsError}</div>
+                )}
+                {!brandSearchQuery.trim() && !catalogBrandsLoading && !catalogBrandsError && filteredCatalogBrands.length === 0 && (
+                  <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noBrandMatch}</div>
+                )}
+                {!brandSearchQuery.trim() &&
+                  !catalogBrandsLoading &&
+                  !catalogBrandsError &&
+                  filteredCatalogBrands.map((b) => (
+                    <button
+                      key={b.id}
+                      type="button"
+                      className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left text-[16px] text-black/85 active:bg-black/[0.04] transition-colors"
+                      onClick={() => {
+                        setSelectedCatalogBrand(b.name);
+                        setSelectedCatalogModelFromSearch("");
+                        setSelectedCatalogModelName("");
+                        setSelectedCatalogModelForm(undefined);
+                        setSelectedCatalogTarget("");
+                        setBrandDrawerTab("models");
+                        void loadCatalogModels(b.name);
+                      }}
+                    >
+                      {b.name}
+                    </button>
+                  ))}
+              </div>
+            </div>
+          )}
+          {brandDrawerTab === "models" && (
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
+              <div className="sticky top-0 z-10 border-b border-black/8 bg-white px-4 py-2.5 text-[13px] text-black/55">
+                {eqUi.brandLabel}<span className="font-semibold text-black/80">{selectedCatalogBrand || "—"}</span>
+                {selectedCatalogModelFromSearch && (
+                  <span className="ml-2 text-black/45">
+                    {eqUi.modelFromSearchLabel}
+                    {selectedCatalogModelFromSearch}
+                  </span>
+                )}
+              </div>
+              {!selectedCatalogBrand && (
+                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.selectBrandFirst}</div>
+              )}
+              {!!selectedCatalogBrand && catalogModelsLoading && (
+                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.loading}</div>
+              )}
+              {!!selectedCatalogBrand && !catalogModelsLoading && catalogModelsError && (
+                <div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogModelsError}</div>
+              )}
+              {!!selectedCatalogBrand && !catalogModelsLoading && !catalogModelsError && catalogModels.length === 0 && (
+                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noModelsForBrand}</div>
+              )}
+              {!!selectedCatalogBrand &&
+                !catalogModelsLoading &&
+                !catalogModelsError &&
+                catalogModels.map((m) => (
+                  <button
+                    key={`${m.id}-${m.name}`}
+                    type="button"
+                    className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left text-[16px] text-black/85 active:bg-black/[0.04] transition-colors"
+                    onClick={() => {
+                      setSelectedCatalogModelName(m.name);
+                      setSelectedCatalogModelForm(m.form);
+                      setSelectedCatalogTarget("");
+                      setBrandDrawerTab("target");
+                    }}
+                  >
+                    <div>{m.name}</div>
+                    {m.form && <div className="mt-0.5 text-[12px] text-black/50">{m.form}</div>}
+                  </button>
+                ))}
+            </div>
+            </div>
+          )}
+          {brandDrawerTab === "target" && (
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
+              <div className="sticky top-0 z-10 border-b border-black/8 bg-white px-4 py-2.5 text-[13px] text-black/55 space-y-0.5">
+                <div>
+                  {eqUi.targetBrand}
+                  <span className="font-semibold text-black/80">{selectedCatalogBrand || "—"}</span>
+                </div>
+                <div>
+                  {eqUi.targetModel}
+                  <span className="font-semibold text-black/80">{selectedCatalogModelName || "—"}</span>
+                </div>
+                <div>
+                  {eqUi.targetForm}
+                  <span className="font-semibold text-black/80">{selectedCatalogModelForm || eqUi.formAll}</span>
+                </div>
+              </div>
+              <div className="px-5 pt-4 pb-3">
+                <button
+                  type="button"
+                  disabled={!selectedCatalogTarget || isConfirmingTarget}
+                  className="w-full h-10 rounded-full text-[24px] leading-none transition-all disabled:cursor-not-allowed flex items-center justify-center gap-3"
+                  style={{
+                    background: selectedCatalogTarget && !isConfirmingTarget
+                      ? "linear-gradient(180deg, #6a6a6d 0%, #565659 100%)"
+                      : "linear-gradient(180deg, #8b8b8f 0%, #78787c 100%)",
+                    color: selectedCatalogTarget && !isConfirmingTarget ? "#00FFF6" : "rgba(255,255,255,0.55)",
+                    boxShadow: selectedCatalogTarget && !isConfirmingTarget
+                      ? "inset 0 1px 0 rgba(255,255,255,0.15)"
+                      : "inset 0 1px 0 rgba(255,255,255,0.08)",
+                    opacity: selectedCatalogTarget && !isConfirmingTarget ? 1 : 0.9,
+                  }}
+                  onClick={async () => {
+                    if (isConfirmingTarget) return;
+                    setIsConfirmingTarget(true);
+                    try {
+                      await onConfirm(selectedCatalogBrand, selectedCatalogModelName, selectedCatalogTarget, selectedCatalogModelForm);
+                      onClose();
+                      toast.success(eqUi.toastNewEqOk);
+                    } catch {
+                      toast.error(eqUi.toastCurveFail);
+                    } finally {
+                      setIsConfirmingTarget(false);
+                    }
+                  }}
+                >
+                  {isConfirmingTarget && (
+                    <span
+                      className="inline-block w-4 h-4 rounded-full border-2 border-white/40 border-t-[#00FFF6] animate-spin"
+                      aria-hidden="true"
+                    />
+                  )}
+                  {isConfirmingTarget ? eqUi.confirmLoading : eqUi.confirmButton}
+                </button>
+              </div>
+              {!selectedCatalogModelName && (
+                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.selectModelFirst}</div>
+              )}
+              {!!selectedCatalogModelName && availableCatalogTargets.length === 0 && (
+                <div className="py-10 text-center text-[14px] text-black/45">{eqUi.noTargets}</div>
+              )}
+              {!!selectedCatalogModelName &&
+                availableCatalogTargets.map((target) => {
+                  const active = selectedCatalogTarget === target.name;
+                  return (
+                    <button
+                      key={target.name}
+                      type="button"
+                      className="w-full border-b border-black/[0.06] px-4 py-3 text-left active:bg-black/[0.04] transition-colors"
+                      style={active ? { background: "rgba(0,255,246,0.14)" } : undefined}
+                      onClick={() => {
+                        setSelectedCatalogTarget(target.name);
+                        toast.success(eqInterp(eqUi.toastTargetSelected, { name: target.name }));
+                      }}
+                    >
+                      <div className="text-[15px] text-black/85 font-medium">{target.name}</div>
+                      <div className="mt-1 text-[12px] text-black/55">
+                        {eqInterp(eqUi.bassBoost, {
+                          fc: String(target.bassBoost.fc),
+                          q: String(target.bassBoost.q),
+                          gain: String(target.bassBoost.gain),
+                        })}
+                      </div>
+                    </button>
+                  );
+                })}
+            </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/eq/components/FreqChart.tsx b/client/src/pages/eq/components/FreqChart.tsx
new file mode 100644
index 0000000..b601726
--- /dev/null
+++ b/client/src/pages/eq/components/FreqChart.tsx
@@ -0,0 +1,442 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+import { toast } from "sonner";
+import { useStrokeDrawAnimation } from "@/lib/useStrokeDrawAnimation";
+import {
+  buildPeqSvgCurveData,
+  sampleCombinedPeqMagnitudeDb,
+} from "@/lib/peqAudio";
+import type { PeqEqUi } from "../constants";
+import { eqInterp } from "../utils";
+
+/* ── Legend indicator ── */
+function LegendCurveIndicator({
+  loading,
+  color,
+}: {
+  loading: boolean;
+  color: string;
+}) {
+  if (loading) {
+    return (
+      <span
+        className="inline-block w-3 h-3 rounded-full border-2 animate-spin flex-shrink-0"
+        style={{ borderColor: `${color}40`, borderTopColor: color }}
+        aria-hidden="true"
+      />
+    );
+  }
+  return <div className="w-3 h-[2px] rounded flex-shrink-0" style={{ background: color }} />;
+}
+
+/* ── Frequency Response Chart ── */
+export function FreqChart({
+  bands,
+  rawCurve,
+  rawCurveLoading = false,
+  selectedBand,
+  abMode,
+  onAbToggle,
+  onCopyAndSwitchTo,
+  onApplyB,
+  onSaveB,
+  onBandDrag,
+  onBandSelect,
+  eqUi,
+}: {
+  bands: Array<{ freq: number; gain: number; q: number; type: string; enabled: boolean }>;
+  rawCurve: number[] | null;
+  rawCurveLoading?: boolean;
+  selectedBand: number;
+  abMode: "A" | "B";
+  onAbToggle: (m: "A" | "B") => void;
+  onCopyAndSwitchTo: (to: "A" | "B") => void;
+  onApplyB: () => void;
+  onSaveB: () => void;
+  onBandDrag: (idx: number, patch: Partial<{ freq: number; gain: number }>) => void;
+  onBandSelect: (idx: number) => void;
+  eqUi: PeqEqUi;
+}) {
+  /** 频响图 SVG 高度（viewBox 与 CSS 一致） */
+  const H = 400;
+  const chartContainerRef = useRef<HTMLDivElement | null>(null);
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const draggingBandRef = useRef<number | null>(null);
+  const curvePathRef = useRef<SVGPathElement | null>(null);
+  const rawPathRef = useRef<SVGPathElement | null>(null);
+  const equalizedPathRef = useRef<SVGPathElement | null>(null);
+  const [chartWidth, setChartWidth] = useState(340);
+  const W = chartWidth;
+  const [isBandDragging, setIsBandDragging] = useState(false);
+
+  useEffect(() => {
+    const node = chartContainerRef.current;
+    if (!node) return;
+
+    const updateWidth = () => {
+      const nextWidth = Math.round(node.clientWidth);
+      if (nextWidth > 0) setChartWidth(nextWidth);
+    };
+
+    updateWidth();
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  const Y_DB_MAX = 20;
+
+  const freqToX = (f: number) => {
+    const logMin = Math.log10(20), logMax = Math.log10(20000);
+    return ((Math.log10(Math.max(20, Math.min(20000, f))) - logMin) / (logMax - logMin)) * W;
+  };
+  const gainToY = (g: number) => H / 2 - (g / Y_DB_MAX) * (H / 2 - 10);
+  const xToFreq = (x: number) => {
+    const logMin = Math.log10(20), logMax = Math.log10(20000);
+    const clampedX = Math.max(0, Math.min(W, x));
+    return Math.pow(10, logMin + (clampedX / W) * (logMax - logMin));
+  };
+  const yToGain = (y: number) => {
+    const clampedY = Math.max(10, Math.min(H - 10, y));
+    return ((H / 2 - clampedY) / (H / 2 - 10)) * Y_DB_MAX;
+  };
+
+  const updateBandFromPointer = (idx: number, clientX: number, clientY: number) => {
+    const svg = svgRef.current;
+    if (!svg || W <= 0) return;
+    const rect = svg.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+
+    const x = ((clientX - rect.left) / rect.width) * W;
+    const y = ((clientY - rect.top) / rect.height) * H;
+    const freq = Math.round(Math.max(20, Math.min(20000, xToFreq(x))));
+    const gain = Number(Math.max(-Y_DB_MAX, Math.min(Y_DB_MAX, yToGain(y))).toFixed(1));
+    onBandDrag(idx, { freq, gain });
+  };
+
+  const handleBandPointerDown = (idx: number, e: React.PointerEvent<SVGGElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    draggingBandRef.current = idx;
+    setIsBandDragging(true);
+    onBandSelect(idx);
+    updateBandFromPointer(idx, e.clientX, e.clientY);
+  };
+
+  const handleSvgPointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    const idx = draggingBandRef.current;
+    if (idx === null) return;
+    e.preventDefault();
+    updateBandFromPointer(idx, e.clientX, e.clientY);
+  };
+
+  const stopDragging = () => {
+    draggingBandRef.current = null;
+    setIsBandDragging(false);
+  };
+
+  const curveData = useMemo(
+    () =>
+      buildPeqSvgCurveData({
+        bands,
+        width: W,
+        height: H,
+        fs: 48000,
+        yDbMax: Y_DB_MAX,
+        minFreq: 20,
+        maxFreq: 20000,
+        paddingY: 10,
+      }),
+    [bands, W, H],
+  );
+  const pathD = curveData.pathD;
+  const fillD = curveData.fillD;
+
+  /** 各带中心频率处级联响应 dB，与黄线同源 — 手柄纵坐标须用此值才能落在曲线上 */
+  const combinedMagDbAtHandles = useMemo(
+    () => bands.map((b) => sampleCombinedPeqMagnitudeDb(bands, b.freq, 48000)),
+    [bands],
+  );
+
+  const [curveVisibilityByMode, setCurveVisibilityByMode] = useState<
+    Record<"A" | "B", { eq: boolean; raw: boolean; equalized: boolean }>
+  >({
+    A: { eq: true, raw: true, equalized: true },
+    B: { eq: true, raw: false, equalized: false },
+  });
+  const showEq = curveVisibilityByMode[abMode].eq;
+  const showRaw = curveVisibilityByMode[abMode].raw;
+  const showEqualized = curveVisibilityByMode[abMode].equalized;
+
+  const toggleCurveVisibility = (key: "eq" | "raw" | "equalized") => {
+    setCurveVisibilityByMode((prev) => ({
+      ...prev,
+      [abMode]: {
+        ...prev[abMode],
+        [key]: !prev[abMode][key],
+      },
+    }));
+  };
+
+  const rawPathD = useMemo(() => {
+    if (!Array.isArray(rawCurve) || rawCurve.length !== curveData.points.length) return "";
+    return curveData.points
+      .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${gainToY(rawCurve[i] ?? 0).toFixed(1)}`)
+      .join(" ");
+  }, [rawCurve, curveData.points]);
+  const equalizedPathD = useMemo(() => {
+    if (!Array.isArray(rawCurve) || rawCurve.length !== curveData.points.length) return "";
+    return curveData.points
+      .map((p, i) => {
+        const y = gainToY((p.gainDb ?? 0) + (rawCurve[i] ?? 0));
+        return `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${y.toFixed(1)}`;
+      })
+      .join(" ");
+  }, [rawCurve, curveData.points]);
+  const hasRawCurve = !!rawPathD;
+  const hasEqualizedCurve = !!equalizedPathD;
+
+  // Intro draw once; EQ param edits update path in place without replaying the stroke animation.
+  const strokeAnimOpts = { durationMs: 1350, replayOnPathChange: false as const };
+  useStrokeDrawAnimation(curvePathRef, pathD, {
+    ...strokeAnimOpts,
+    enabled: !isBandDragging,
+  });
+  useStrokeDrawAnimation(rawPathRef, rawPathD, {
+    ...strokeAnimOpts,
+    enabled: !isBandDragging && !!rawPathD,
+  });
+  useStrokeDrawAnimation(equalizedPathRef, equalizedPathD, {
+    ...strokeAnimOpts,
+    enabled: !isBandDragging && !!equalizedPathD,
+  });
+
+  const targetMode: "A" | "B" = abMode === "A" ? "B" : "A";
+  const copyButtonText = eqInterp(eqUi.chartCopyTo, { mode: targetMode });
+
+  const freqLabels = [20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000];
+  const gainLabels = [20, 15, 10, 5, 0, -5, -10, -15, -20];
+
+  return (
+    <div className="ios-list-group p-3 mb-3">
+      {/* Legend row */}
+      <div className="flex items-center gap-3 mb-2 px-1">
+        <button
+          type="button"
+          className="flex items-center gap-1.5 active:opacity-80 transition-opacity"
+          onClick={() => toggleCurveVisibility("eq")}
+        >
+          <div className="w-3 h-[2px] rounded" style={{ background: "#FFED00" }} />
+          <span className="text-[10px]" style={{ color: "#FFED00", opacity: showEq ? 1 : 0.35 }}>Equalizer</span>
+        </button>
+        <button
+          type="button"
+          className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
+          onClick={() => toggleCurveVisibility("raw")}
+          disabled={rawCurveLoading || !hasRawCurve}
+        >
+          <LegendCurveIndicator loading={rawCurveLoading} color="#ffffff" />
+          <span
+            className="text-[10px]"
+            style={{ color: "#ffffff", opacity: rawCurveLoading || showRaw ? 1 : 0.35 }}
+          >
+            Raw
+          </span>
+        </button>
+        <button
+          type="button"
+          className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
+          onClick={() => toggleCurveVisibility("equalized")}
+          disabled={rawCurveLoading || !hasEqualizedCurve}
+        >
+          <LegendCurveIndicator loading={rawCurveLoading} color="#23d2fe" />
+          <span
+            className="text-[10px]"
+            style={{ color: "#23d2fe", opacity: rawCurveLoading || showEqualized ? 1 : 0.35 }}
+          >
+            Equalized
+          </span>
+        </button>
+      </div>
+
+      {/* A/B + DIFF controls */}
+      <div className="flex w-full items-center gap-2 mb-2 px-1">
+        <div className="flex min-w-0 items-center gap-2">
+        {/* A/B toggle pill */}
+        <div className="flex items-center rounded-[8px] overflow-hidden"
+          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}>
+          {(["A", "B"] as const).map((m) => (
+            <button key={m}
+              className="px-3 py-1 text-[12px] font-semibold transition-all duration-150"
+              style={abMode === m ? {
+                background: "#00FFF6", color: "#000", borderRadius: 6,
+              } : { color: "rgba(255,255,255,0.4)" }}
+              onClick={() => onAbToggle(m)}>
+              {m}
+            </button>
+          ))}
+        </div>
+        <button
+          className="px-3 py-1 rounded-[8px] text-[11px] text-white/50 active:text-white transition-colors"
+          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}
+          onClick={() => {
+            onCopyAndSwitchTo(targetMode);
+            setCurveVisibilityByMode((prev) => ({
+              ...prev,
+              [targetMode]: { ...prev[abMode] },
+            }));
+            toast.success(eqInterp(eqUi.toastChartCopied, { mode: targetMode }));
+          }}>
+          {copyButtonText}
+        </button>
+        </div>
+        <div className="ml-auto flex shrink-0 items-center gap-2">
+        <button
+          type="button"
+          className="px-3 py-1 rounded-[8px] text-[11px] text-white/50 active:text-white transition-colors"
+          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}
+          onClick={() => onApplyB()}
+        >
+          {eqUi.chartApplyB}
+        </button>
+        <button
+          type="button"
+          className="px-3 py-1 rounded-[8px] text-[11px] text-white/50 active:text-white transition-colors"
+          style={{ background: "rgba(44,44,46,0.7)", border: "1px solid rgba(255,255,255,0.08)" }}
+          onClick={() => onSaveB()}
+        >
+          {eqUi.chartSaveB}
+        </button>
+        </div>
+      </div>
+
+      {/* SVG chart */}
+      <div
+        ref={chartContainerRef}
+        className="rounded-[10px] overflow-hidden"
+        style={{ background: "rgba(10,12,10,0.7)" }}
+      >
+        <svg
+          ref={svgRef}
+          viewBox={`0 0 ${W} ${H}`}
+          className="w-full"
+          style={{ height: H, touchAction: "none" }}
+          onPointerMove={handleSvgPointerMove}
+          onPointerUp={stopDragging}
+          onPointerCancel={stopDragging}
+          onPointerLeave={stopDragging}
+        >
+          {/* dB grid */}
+          {gainLabels.map((g) => (
+            <g key={g}>
+              <line x1="0" y1={gainToY(g)} x2={W} y2={gainToY(g)}
+                stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
+              <text x="3" y={gainToY(g) - 2} fontSize="7" fill="rgba(255,255,255,0.2)">
+                {g > 0 ? `+${g}` : g}
+              </text>
+            </g>
+          ))}
+          {/* Freq grid */}
+          {freqLabels.map((f) => (
+            <line key={f} x1={freqToX(f)} y1="0" x2={freqToX(f)} y2={H - 12}
+              stroke="rgba(255,255,255,0.05)" strokeWidth="1" />
+          ))}
+          {/* Zero line */}
+          <line x1="0" y1={H / 2} x2={W} y2={H / 2} stroke="rgba(255,255,255,0.15)" strokeWidth="1" />
+          {/* Fill */}
+          {showEq && <path d={fillD} fill="rgba(255, 237, 0, 0.08)" />}
+          {/* EQ curve */}
+          {showEq && (
+            <path
+              ref={curvePathRef}
+              d={pathD}
+              fill="none"
+              stroke="#FFED00"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          )}
+          {/* Raw */}
+          {rawPathD && showRaw && (
+            <path
+              ref={rawPathRef}
+              d={rawPathD}
+              fill="none"
+              stroke="#ffffff"
+              strokeWidth="1.6"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              opacity="0.9"
+            />
+          )}
+          {/* Equalized = EQ + Raw */}
+          {equalizedPathD && showEqualized && (
+            <path
+              ref={equalizedPathRef}
+              d={equalizedPathD}
+              fill="none"
+              stroke="#23d2fe"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              opacity="0.95"
+            />
+          )}
+          {/* Band nodes with index */}
+          {showEq && bands.map((band, i) => (
+            <g
+              key={i}
+              style={{ cursor: "grab" }}
+              onPointerDown={(e) => handleBandPointerDown(i, e)}
+            >
+              {(() => {
+                const isSelected = i === selectedBand;
+                const outerR = isSelected ? 8.8 : 7;
+                const fillColor = isSelected ? "#FFED00" : "rgba(0,0,0,0.5)";
+                const strokeColor = isSelected ? "#FFED00" : "#FFED00";
+                const textColor = isSelected ? "#000000" : "#FFED00";
+                const handleY = gainToY(combinedMagDbAtHandles[i] ?? 0);
+                return (
+                  <>
+                    <circle
+                      cx={freqToX(band.freq)}
+                      cy={handleY}
+                      r="14"
+                      fill="transparent"
+                    />
+                    <circle
+                      cx={freqToX(band.freq)}
+                      cy={handleY}
+                      r={outerR}
+                      fill={fillColor}
+                      stroke={strokeColor}
+                      strokeWidth={isSelected ? 1.8 : 1.5}
+                    />
+                    <text
+                      x={freqToX(band.freq)}
+                      y={handleY + 3.5}
+                      textAnchor="middle"
+                      fontSize="7"
+                      fill={textColor}
+                      fontWeight="bold"
+                      pointerEvents="none"
+                    >
+                      {i + 1}
+                    </text>
+                  </>
+                );
+              })()}
+            </g>
+          ))}
+          {/* Freq axis labels */}
+          {freqLabels.map((f) => (
+            <text key={f} x={freqToX(f)} y={H - 1} textAnchor="middle"
+              fontSize="7" fill="rgba(255,255,255,0.25)">
+              {f >= 1000 ? `${f / 1000}k` : f}
+            </text>
+          ))}
+        </svg>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/eq/components/SaveBDialog.tsx b/client/src/pages/eq/components/SaveBDialog.tsx
new file mode 100644
index 0000000..e2964e8
--- /dev/null
+++ b/client/src/pages/eq/components/SaveBDialog.tsx
@@ -0,0 +1,69 @@
+import { X } from "lucide-react";
+import type { PeqEqUi } from "../constants";
+
+export function SaveBDialog({
+  open,
+  presetName,
+  onNameChange,
+  onSave,
+  onClose,
+  eqUi,
+}: {
+  open: boolean;
+  presetName: string;
+  onNameChange: (v: string) => void;
+  onSave: () => void;
+  onClose: () => void;
+  eqUi: PeqEqUi;
+}) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4">
+      <div
+        className="w-full max-w-[420px] rounded-[14px] p-5"
+        style={{
+          background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-[18px] font-semibold leading-tight text-white/90">{eqUi.saveBTitle}</h3>
+          <button
+            type="button"
+            className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
+            onClick={onClose}
+            aria-label={eqUi.closeDrawer}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <input
+          value={presetName}
+          onChange={(e) => onNameChange(e.target.value)}
+          className="h-11 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none placeholder:text-white/30 focus:border-white/15"
+          autoFocus
+        />
+
+        <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
+          <button
+            type="button"
+            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
+            onClick={onClose}
+          >
+            {eqUi.cancel}
+          </button>
+          <button
+            type="button"
+            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
+            onClick={onSave}
+          >
+            {eqUi.save}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/eq/components/ShareDialog.tsx b/client/src/pages/eq/components/ShareDialog.tsx
new file mode 100644
index 0000000..800e70e
--- /dev/null
+++ b/client/src/pages/eq/components/ShareDialog.tsx
@@ -0,0 +1,512 @@
+import { useState } from "react";
+import { X, Copy, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import type { PeqEqUi } from "../constants";
+
+type PeqItem = {
+  name: string;
+  brand?: string;
+  model?: string;
+  form?: string;
+  filters?: any[] | string;
+  autoPre?: number;
+  preamp?: number;
+  canDel?: number;
+};
+
+type PeqCardLabels = {
+  share: string;
+};
+
+type ImportedEqData = {
+  name: string;
+  brand?: string;
+  model?: string;
+  form?: string;
+  filters?: any[] | string;
+  preamp?: number;
+};
+
+export function ShareDialog({
+  open,
+  onClose,
+  peqItems,
+  headphoneIdx,
+  eqUi,
+  peqCardLabels,
+  onImportEq,
+}: {
+  open: boolean;
+  onClose: () => void;
+  peqItems: PeqItem[];
+  headphoneIdx: number;
+  eqUi: PeqEqUi;
+  peqCardLabels: PeqCardLabels;
+  onImportEq: (data: ImportedEqData) => void;
+}) {
+  const [shareDialogTab, setShareDialogTab] = useState<"share" | "import" | "myShares">("share");
+  const [shareSelectedIdx, setShareSelectedIdx] = useState<number>(headphoneIdx);
+  const [shareCode, setShareCode] = useState<string | null>(null);
+  const [shareGenerating, setShareGenerating] = useState(false);
+  const [importCodeInputs, setImportCodeInputs] = useState<string[]>(["", "", "", "", ""]);
+  const [importQuerying, setImportQuerying] = useState(false);
+  const [importedEqData, setImportedEqData] = useState<ImportedEqData | null>(null);
+  const [mySharesList, setMySharesList] = useState<Array<{ code: string; name: string }>>([]);
+  const [mySharesLoading, setMySharesLoading] = useState(false);
+
+  if (!open) return null;
+
+  /* ── clipboard helper ── */
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(eqUi.shareCopied);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      toast.success(eqUi.shareCopied);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-[420px] rounded-[14px] p-5"
+        style={{
+          background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* header */}
+        <div className="flex items-center justify-between mb-4">
+          {/* tab bar */}
+          <div className="flex gap-1 rounded-[10px] p-1" style={{ background: "rgba(44,44,46,0.8)" }}>
+            <button
+              type="button"
+              className={cn(
+                "px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
+                shareDialogTab === "share"
+                  ? "bg-[#00FFF6] text-black font-semibold"
+                  : "text-white/60 hover:text-white/80",
+              )}
+              onClick={() => setShareDialogTab("share")}
+            >
+              {peqCardLabels.share}
+            </button>
+            <button
+              type="button"
+              className={cn(
+                "px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
+                shareDialogTab === "import"
+                  ? "bg-[#00FFF6] text-black font-semibold"
+                  : "text-white/60 hover:text-white/80",
+              )}
+              onClick={() => setShareDialogTab("import")}
+            >
+              {eqUi.importTab}
+            </button>
+            <button
+              type="button"
+              className={cn(
+                "px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
+                shareDialogTab === "myShares"
+                  ? "bg-[#00FFF6] text-black font-semibold"
+                  : "text-white/60 hover:text-white/80",
+              )}
+              onClick={() => {
+                setShareDialogTab("myShares");
+                if (mySharesList.length === 0 && !mySharesLoading) {
+                  void (async () => {
+                    setMySharesLoading(true);
+                    try {
+                      // ── TODO: 伪代码 — 调用查询我的分享列表接口 ──
+                      // const res = await fetch("/api/eq/share/list");
+                      // if (!res.ok) {
+                      //   toast.error(eqUi.mySharesLoadFail);
+                      //   return;
+                      // }
+                      // const data = await res.json();
+                      // setMySharesList(data.list);
+
+                      // 模拟接口延迟
+                      await new Promise((r) => setTimeout(r, 600));
+                      // 模拟返回分享列表
+                      setMySharesList([
+                        { code: "AK7NR", name: "Sennheiser HD 600 (AutoEQ)" },
+                        { code: "P3WQM", name: "Beyerdynamic DT 880" },
+                        { code: "Z5XKL", name: "Hifiman HE400i" },
+                      ]);
+                    } catch {
+                      // TODO: 错误处理
+                    } finally {
+                      setMySharesLoading(false);
+                    }
+                  })();
+                }
+              }}
+            >
+              {eqUi.mySharesTab}
+            </button>
+          </div>
+          <button
+            type="button"
+            className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
+            onClick={onClose}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* ── Tab: Share EQ ── */}
+        {shareDialogTab === "share" && (
+          <>
+            {/* hint */}
+            <p className="mb-3 text-[13px] leading-relaxed text-white/45">{eqUi.shareSelectHint}</p>
+
+            {/* EQ preset list */}
+            <div
+              className="rounded-[10px] overflow-hidden max-h-48 overflow-y-auto mb-4"
+              style={{
+                background: "rgba(10,12,16,0.98)",
+                border: "1px solid rgba(0,255,246,0.35)",
+                boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
+              }}
+            >
+              {peqItems.length === 0 && (
+                <div className="py-6 text-center text-[13px] text-white/30">—</div>
+              )}
+              {peqItems.map((item, idx) => {
+                const active = idx === shareSelectedIdx;
+                return (
+                  <button
+                    key={`${item.name}-${idx}`}
+                    type="button"
+                    className={`w-full px-3 py-2.5 text-left text-[13px] transition-colors truncate border-b border-white/[0.06] last:border-b-0 ${
+                      active ? "text-black font-semibold" : "text-white/90 hover:bg-white/10"
+                    }`}
+                    style={active ? { background: "#00FFF6" } : undefined}
+                    title={item.name}
+                    onClick={() => setShareSelectedIdx(idx)}
+                  >
+                    {item.name}
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* confirm button */}
+            <button
+              type="button"
+              disabled={shareGenerating || peqItems.length === 0}
+              className={cn(
+                "w-full rounded-full py-2.5 text-[15px] font-semibold text-black transition-all active:scale-[0.98]",
+                shareGenerating || peqItems.length === 0
+                  ? "bg-[#00FFF6]/40 cursor-not-allowed"
+                  : "bg-[#00FFF6] hover:brightness-95",
+              )}
+              onClick={async () => {
+                if (shareGenerating) return;
+                setShareGenerating(true);
+                setShareCode(null);
+                try {
+                  // ── TODO: 伪代码 — 调用分享接口 ──
+                  // const selectedPeq = peqItems[shareSelectedIdx];
+                  // const res = await fetch("/api/eq/share", {
+                  //   method: "POST",
+                  //   headers: { "Content-Type": "application/json" },
+                  //   body: JSON.stringify({
+                  //     brand: selectedPeq.brand,
+                  //     model: selectedPeq.model,
+                  //     target: selectedPeq.form,
+                  //     filters: selectedPeq.filters,
+                  //     preamp: selectedPeq.preamp,
+                  //   }),
+                  // });
+                  // const data = await res.json();
+                  // setShareCode(data.shareCode);
+
+                  // 模拟接口延迟
+                  await new Promise((r) => setTimeout(r, 800));
+                  // 模拟返回 5 位随机分享码
+                  const fakeCode = Array.from(
+                    { length: 5 },
+                    () => "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"[Math.floor(Math.random() * 32)],
+                  ).join("");
+                  setShareCode(fakeCode);
+                } catch {
+                  // TODO: 错误处理
+                } finally {
+                  setShareGenerating(false);
+                }
+              }}
+            >
+              {shareGenerating ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader2 size={16} className="animate-spin" />
+                  {eqUi.shareGenerating}
+                </span>
+              ) : (
+                eqUi.shareConfirm
+              )}
+            </button>
+
+            {/* share code display */}
+            {shareCode && (
+              <div className="mt-5">
+                <p className="mb-2 text-[12px] text-white/40 font-medium">{eqUi.shareCodeLabel}</p>
+                <div className="flex items-center gap-2">
+                  <div className="flex flex-1 gap-1.5 justify-center">
+                    {shareCode.split("").map((ch, i) => (
+                      <div
+                        key={i}
+                        className="w-11 h-12 rounded-[8px] flex items-center justify-center text-[18px] font-bold tracking-wider text-[#00FFF6]"
+                        style={{
+                          background: "rgba(0,255,246,0.08)",
+                          border: "1px solid rgba(0,255,246,0.25)",
+                        }}
+                      >
+                        {ch}
+                      </div>
+                    ))}
+                  </div>
+                  <button
+                    type="button"
+                    className="shrink-0 w-9 h-9 rounded-[8px] flex items-center justify-center text-[#00FFF6] active:scale-95 transition-transform"
+                    style={{
+                      background: "rgba(0,255,246,0.12)",
+                      border: "1px solid rgba(0,255,246,0.25)",
+                    }}
+                    onClick={() => void copyToClipboard(shareCode)}
+                  >
+                    <Copy size={16} />
+                  </button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* ── Tab: Import EQ ── */}
+        {shareDialogTab === "import" && (
+          <>
+            {/* hint */}
+            <p className="mb-3 text-[13px] leading-relaxed text-white/45">{eqUi.importCodeHint}</p>
+
+            {/* 5 input boxes */}
+            <div className="flex gap-2 justify-center mb-4">
+              {importCodeInputs.map((ch, i) => (
+                <input
+                  key={i}
+                  value={ch}
+                  inputMode="text"
+                  maxLength={1}
+                  autoCapitalize="characters"
+                  autoCorrect="off"
+                  className="w-11 h-12 rounded-[8px] text-center text-[18px] font-bold tracking-wider text-[#00FFF6] bg-transparent outline-none uppercase"
+                  style={{
+                    background: "rgba(0,255,246,0.06)",
+                    border: "1px solid rgba(0,255,246,0.25)",
+                    caretColor: "#00FFF6",
+                  }}
+                  onChange={(e) => {
+                    const val = e.target.value.replace(/[^a-zA-Z0-9]/g, "").slice(-1).toUpperCase();
+                    const next = [...importCodeInputs];
+                    next[i] = val;
+                    setImportCodeInputs(next);
+                    setImportedEqData(null);
+                    // auto-focus next box
+                    if (val && i < 4) {
+                      const el = e.target.nextElementSibling as HTMLInputElement | null;
+                      el?.focus();
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    // backspace: clear current & focus previous
+                    if (e.key === "Backspace" && !importCodeInputs[i] && i > 0) {
+                      const next = [...importCodeInputs];
+                      next[i - 1] = "";
+                      setImportCodeInputs(next);
+                      setImportedEqData(null);
+                      const prev = (e.target as HTMLElement).previousElementSibling as HTMLInputElement | null;
+                      prev?.focus();
+                    }
+                  }}
+                  onPaste={(e) => {
+                    e.preventDefault();
+                    const text = (e.clipboardData.getData("text") || "").replace(/[^a-zA-Z0-9]/g, "").toUpperCase().slice(0, 5);
+                    if (!text) return;
+                    const next = [...importCodeInputs];
+                    for (let j = 0; j < 5; j++) {
+                      next[j] = text[j] ?? "";
+                    }
+                    setImportCodeInputs(next);
+                    setImportedEqData(null);
+                    // focus last filled or last box
+                    const focusIdx = Math.min(text.length, 4);
+                    const inputs = (e.target as HTMLElement).parentElement?.querySelectorAll("input");
+                    (inputs?.[focusIdx] as HTMLInputElement | undefined)?.focus();
+                  }}
+                  ref={() => {
+                    // stash ref for focus management if needed later
+                  }}
+                />
+              ))}
+            </div>
+
+            {/* query button */}
+            <button
+              type="button"
+              disabled={importQuerying || importCodeInputs.some((c) => !c)}
+              className={cn(
+                "w-full rounded-full py-2.5 text-[15px] font-semibold text-black transition-all active:scale-[0.98]",
+                importQuerying || importCodeInputs.some((c) => !c)
+                  ? "bg-[#00FFF6]/40 cursor-not-allowed"
+                  : "bg-[#00FFF6] hover:brightness-95",
+              )}
+              onClick={async () => {
+                if (importQuerying) return;
+                const code = importCodeInputs.join("");
+                setImportQuerying(true);
+                setImportedEqData(null);
+                try {
+                  // ── TODO: 伪代码 — 调用导入查询接口 ──
+                  // const res = await fetch(`/api/eq/share/${code}`);
+                  // if (!res.ok) {
+                  //   toast.error(eqUi.importCodeNotFound);
+                  //   return;
+                  // }
+                  // const data = await res.json();
+                  // setImportedEqData({
+                  //   name: data.name,
+                  //   brand: data.brand,
+                  //   model: data.model,
+                  //   form: data.target,
+                  //   filters: data.filters,
+                  //   preamp: data.preamp,
+                  // });
+
+                  // 模拟接口延迟
+                  await new Promise((r) => setTimeout(r, 600));
+                  // 模拟返回 EQ 数据
+                  setImportedEqData({
+                    name: "Sennheiser HD 600 (AutoEQ)",
+                    brand: "Sennheiser",
+                    model: "HD 600",
+                    form: "over-ear",
+                    filters: [],
+                    preamp: -5.2,
+                  });
+                } catch {
+                  // TODO: 错误处理
+                } finally {
+                  setImportQuerying(false);
+                }
+              }}
+            >
+              {importQuerying ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader2 size={16} className="animate-spin" />
+                  {eqUi.importQuerying}
+                </span>
+              ) : (
+                eqUi.importQuery
+              )}
+            </button>
+
+            {/* imported EQ result */}
+            {importedEqData && (
+              <div className="mt-4 rounded-[10px] p-3" style={{ background: "rgba(0,255,246,0.06)", border: "1px solid rgba(0,255,246,0.2)" }}>
+                <div className="flex items-center justify-between">
+                  <div className="min-w-0 flex-1">
+                    <p className="text-[12px] text-white/40 font-medium mb-0.5">{eqUi.importEqName}</p>
+                    <p className="text-[14px] text-white/90 font-semibold truncate">{importedEqData.name}</p>
+                  </div>
+                  <button
+                    type="button"
+                    className="shrink-0 ml-3 rounded-full px-4 py-2 text-[13px] font-semibold text-black bg-[#00FFF6] hover:brightness-95 active:scale-[0.98] transition-all"
+                    onClick={() => {
+                      // ── TODO: 伪代码 — 导入 EQ 到预设列表 ──
+                      // onImportEq will handle the parent-level state changes
+                      onImportEq(importedEqData);
+                    }}
+                  >
+                    {eqUi.importButton}
+                  </button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* ── Tab: My Shares ── */}
+        {shareDialogTab === "myShares" && (
+          <>
+            {mySharesLoading && mySharesList.length === 0 ? (
+              <div className="flex items-center justify-center py-10 gap-2 text-white/50">
+                <Loader2 size={16} className="animate-spin" />
+                <span className="text-[13px]">{eqUi.mySharesLoading}</span>
+              </div>
+            ) : mySharesList.length === 0 ? (
+              <div className="py-10 text-center text-[13px] text-white/30">{eqUi.mySharesEmpty}</div>
+            ) : (
+              <div
+                className="rounded-[10px] overflow-hidden max-h-64 overflow-y-auto"
+                style={{
+                  background: "rgba(10,12,16,0.98)",
+                  border: "1px solid rgba(0,255,246,0.35)",
+                  boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
+                }}
+              >
+                {mySharesList.map((item, idx) => (
+                  <div
+                    key={`${item.code}-${idx}`}
+                    className="flex items-center gap-3 px-3 py-2.5 border-b border-white/[0.06] last:border-b-0"
+                  >
+                    {/* share code */}
+                    <div
+                      className="shrink-0 flex gap-0.5"
+                      title={eqUi.mySharesCode}
+                    >
+                      {item.code.split("").map((ch, ci) => (
+                        <span
+                          key={ci}
+                          className="w-[18px] h-[22px] rounded-[4px] flex items-center justify-center text-[11px] font-bold text-[#00FFF6]"
+                          style={{ background: "rgba(0,255,246,0.1)", border: "1px solid rgba(0,255,246,0.2)" }}
+                        >
+                          {ch}
+                        </span>
+                      ))}
+                    </div>
+                    {/* EQ name */}
+                    <div className="min-w-0 flex-1 truncate text-[13px] text-white/85">{item.name}</div>
+                    {/* copy code button */}
+                    <button
+                      type="button"
+                      className="shrink-0 w-7 h-7 rounded-[6px] flex items-center justify-center text-[#00FFF6]/70 active:scale-95 transition-transform"
+                      style={{ background: "rgba(0,255,246,0.08)", border: "1px solid rgba(0,255,246,0.15)" }}
+                      onClick={() => void copyToClipboard(item.code)}
+                    >
+                      <Copy size={13} />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/eq/hooks/useRawCurve.ts b/client/src/pages/eq/hooks/useRawCurve.ts
new file mode 100644
index 0000000..aa321a8
--- /dev/null
+++ b/client/src/pages/eq/hooks/useRawCurve.ts
@@ -0,0 +1,102 @@
+import { useState, useRef, useCallback } from "react";
+import { decodeCustomBase64 } from "@/lib/luxsinApi";
+
+/* ── Module-level cache: survives route switches ── */
+const rawCurveCache = new Map<string, number[] | null>();
+
+export function useRawCurve() {
+  const [currentRawCurve, setCurrentRawCurve] = useState<number[] | null>(null);
+  const [rawCurveLoading, setRawCurveLoading] = useState(false);
+  const rawCurveCacheRef = useRef(rawCurveCache);
+
+  const getModelCurve = async (brand: string, name: string) => {
+    try {
+      console.log("[modelCurve] request", { brand, name });
+      const resp = await fetch(
+        `//api.luxsin.com.cn/audio/modelCurve?brand=${encodeURIComponent(brand)}&name=${encodeURIComponent(name)}`
+      );
+      const data = await resp.text();
+      // 使用自定义 Base64 解码
+      const decoded = decodeCustomBase64(data);
+      const parsed = JSON.parse(decoded);
+      console.log("[modelCurve] decoded", {
+        hasFrRaw:
+          !!(parsed &&
+            typeof parsed === "object" &&
+            "fr" in (parsed as Record<string, unknown>) &&
+            (parsed as { fr?: unknown }).fr &&
+            typeof (parsed as { fr?: unknown }).fr === "object" &&
+            "raw" in ((parsed as { fr?: Record<string, unknown> }).fr ?? {})),
+      });
+      console.log("[modelCurve] fr.raw", (parsed as { fr?: { raw?: unknown } }).fr?.raw);
+      return parsed;
+    } catch (error) {
+      console.log("[modelCurve] request failed", error);
+      return null;
+    }
+  };
+
+  const loadRawCurveForPeq = useCallback(
+    async (peq: { brand?: string; model?: string; name?: string } | undefined): Promise<number[] | null> => {
+      const brand = peq?.brand?.trim() ?? "";
+      const model = peq?.model?.trim() ?? "";
+      if (!brand || !model) return null;
+
+      const cacheKey = `${brand}|${model}`;
+      if (rawCurveCacheRef.current.has(cacheKey)) {
+        const cached = rawCurveCacheRef.current.get(cacheKey);
+        if (cached) {
+          console.log("[modelCurve] cache hit", { brand, model, rawLength: cached.length });
+        } else {
+          console.log("[modelCurve] cache hit (no raw)", { brand, model });
+        }
+        return cached ?? null;
+      }
+
+      const modelCurve = await getModelCurve(brand, model);
+      if (modelCurve && typeof modelCurve === "object") {
+        const payload = modelCurve as {
+          fr?: { raw?: unknown } | unknown;
+        };
+        const rawCandidate =
+          payload.fr && typeof payload.fr === "object" && Array.isArray((payload.fr as { raw?: unknown }).raw)
+            ? (payload.fr as { raw?: unknown }).raw
+            : null;
+        const raw = Array.isArray(rawCandidate)
+          ? rawCandidate
+              .map((point) => {
+                if (typeof point === "number" && Number.isFinite(point)) return point;
+                if (Array.isArray(point) && point.length >= 2 && typeof point[1] === "number") return point[1];
+                if (point && typeof point === "object") {
+                  const y = (point as Record<string, unknown>).y
+                    ?? (point as Record<string, unknown>).value
+                    ?? (point as Record<string, unknown>).db
+                    ?? (point as Record<string, unknown>).gain;
+                  if (typeof y === "number" && Number.isFinite(y)) return y;
+                }
+                return NaN;
+              })
+          : null;
+        const cleanedRaw = raw && raw.every((v) => Number.isFinite(v)) ? (raw as number[]) : null;
+        rawCurveCacheRef.current.set(cacheKey, cleanedRaw);
+        console.log("[modelCurve] raw check", {
+          brand,
+          model,
+          hasRaw: !!cleanedRaw,
+          rawLength: cleanedRaw?.length ?? 0,
+        });
+        return cleanedRaw;
+      }
+      return null;
+    },
+    [],
+  );
+
+  return {
+    currentRawCurve,
+    setCurrentRawCurve,
+    rawCurveLoading,
+    setRawCurveLoading,
+    loadRawCurveForPeq,
+  };
+}