拆分 EQPage 页面，新增分享码功能，修复 bug，优化性能
This commit is contained in:
eafonyang
@@ -0,0 +1,115 @@
|
||||
import { X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { PeqEqUi } from "../types";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { X } from "lucide-react";
|
||||
import type { PeqEqUi } from "../types";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { X } from "lucide-react";
|
||||
import type { PeqEqUi } from "../types";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,426 @@
|
||||
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 "../eqConstants";
|
||||
import type { PeqEqUi } from "../types";
|
||||
import { eqInterp } from "../eqFormatters";
|
||||
|
||||
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<boolean>;
|
||||
}) {
|
||||
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 {
|
||||
const completed = await onConfirm(
|
||||
selectedCatalogBrand,
|
||||
selectedCatalogModelName,
|
||||
selectedCatalogTarget,
|
||||
selectedCatalogModelForm,
|
||||
);
|
||||
if (completed) {
|
||||
onClose();
|
||||
toast.success(eqUi.toastNewEqOk);
|
||||
} else {
|
||||
toast.info(eqUi.overwritePresetCancelled);
|
||||
}
|
||||
} 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogPortal,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/** Above BrandDrawer (z-110) and ShareDialog (z-120). */
|
||||
const EQ_OVERWRITE_DIALOG_Z = "z-[130]";
|
||||
|
||||
export function PeqOverwriteConfirmDialog({
|
||||
open,
|
||||
title,
|
||||
description,
|
||||
cancelLabel,
|
||||
confirmLabel,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: {
|
||||
open: boolean;
|
||||
title: string;
|
||||
description: string;
|
||||
cancelLabel: string;
|
||||
confirmLabel: string;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
return (
|
||||
<AlertDialog
|
||||
open={open}
|
||||
onOpenChange={(next) => {
|
||||
if (!next) onCancel();
|
||||
}}
|
||||
>
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay className={cn(EQ_OVERWRITE_DIALOG_Z, "bg-black/65")} />
|
||||
<AlertDialogPrimitive.Content
|
||||
className={cn(
|
||||
EQ_OVERWRITE_DIALOG_Z,
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[42%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-md border-white/10 bg-zinc-900 text-white",
|
||||
)}
|
||||
>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-white">{title}</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-white/60">
|
||||
{description}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel
|
||||
className="border-white/20 bg-transparent text-white hover:bg-white/10"
|
||||
onClick={onCancel}
|
||||
>
|
||||
{cancelLabel}
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-[#00FFF6] text-black hover:brightness-95 focus-visible:ring-[#00FFF6]"
|
||||
onClick={onConfirm}
|
||||
>
|
||||
{confirmLabel}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogPrimitive.Content>
|
||||
</AlertDialogPortal>
|
||||
</AlertDialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { X } from "lucide-react";
|
||||
import type { PeqEqUi } from "../types";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,564 @@
|
||||
import { useState } from "react";
|
||||
import { X, Copy, Loader2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { toast } from "sonner";
|
||||
import { acceptShareCode, createShareCode, listShareCodes, queryShareCode } from "@/lib/luxsinApi";
|
||||
import type { PeqEqUi } from "../types";
|
||||
import { resolveShareApiMessage } from "../shareMessages";
|
||||
|
||||
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;
|
||||
target?: string;
|
||||
form?: string;
|
||||
filters?: unknown;
|
||||
preamp?: number;
|
||||
autoPre?: number;
|
||||
};
|
||||
|
||||
export function ShareDialog({
|
||||
open,
|
||||
onClose,
|
||||
peqItems,
|
||||
headphoneIdx,
|
||||
eqUi,
|
||||
peqCardLabels,
|
||||
mac,
|
||||
isDemoMode,
|
||||
onImportEq,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
peqItems: PeqItem[];
|
||||
headphoneIdx: number;
|
||||
eqUi: PeqEqUi;
|
||||
peqCardLabels: PeqCardLabels;
|
||||
mac: string;
|
||||
isDemoMode: boolean;
|
||||
onImportEq: (data: ImportedEqData, shareCode: string) => void | Promise<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 [importSaving, setImportSaving] = useState(false);
|
||||
const [importPresetName, setImportPresetName] = useState("");
|
||||
const [queriedShareCode, setQueriedShareCode] = useState("");
|
||||
const [importedEqData, setImportedEqData] = useState<ImportedEqData | null>(null);
|
||||
const [shareCodeExpireAt, setShareCodeExpireAt] = useState<string | null>(null);
|
||||
const [mySharesList, setMySharesList] = useState<Array<{ share_code: string; expire_at: string; eq_data: Record<string, unknown> }>>([]);
|
||||
const [mySharesLoading, setMySharesLoading] = useState(false);
|
||||
|
||||
const handleImportClick = async () => {
|
||||
if (importSaving || !importedEqData || !queriedShareCode) return;
|
||||
const nextName = importPresetName.trim();
|
||||
if (!nextName) return;
|
||||
|
||||
setImportSaving(true);
|
||||
try {
|
||||
if (!isDemoMode && mac) {
|
||||
const acceptRes = await acceptShareCode(mac, queriedShareCode);
|
||||
if (acceptRes.code !== 200) {
|
||||
toast.error(resolveShareApiMessage("accept", acceptRes, eqUi));
|
||||
return;
|
||||
}
|
||||
}
|
||||
await onImportEq({ ...importedEqData, name: nextName }, queriedShareCode);
|
||||
} finally {
|
||||
setImportSaving(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={() => {
|
||||
if (!importSaving) 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 {
|
||||
const res = await listShareCodes(mac);
|
||||
if (res.code !== 200) {
|
||||
toast.error(resolveShareApiMessage("list", res, eqUi));
|
||||
return;
|
||||
}
|
||||
setMySharesList(res.share_codes ?? []);
|
||||
} catch {
|
||||
toast.error(resolveShareApiMessage("list", { code: 500 }, eqUi));
|
||||
} 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 disabled:opacity-40 disabled:pointer-events-none"
|
||||
disabled={importSaving}
|
||||
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);
|
||||
setShareCodeExpireAt(null);
|
||||
try {
|
||||
const selectedPeq = peqItems[shareSelectedIdx];
|
||||
if (!selectedPeq) {
|
||||
toast.error(eqUi.shareSelectHint);
|
||||
return;
|
||||
}
|
||||
const eqData: Record<string, unknown> = {
|
||||
name: selectedPeq.name,
|
||||
brand: selectedPeq.brand ?? "",
|
||||
model: selectedPeq.model ?? "",
|
||||
form: selectedPeq.form ?? "",
|
||||
filters: selectedPeq.filters ?? [],
|
||||
autoPre: selectedPeq.autoPre ?? 0,
|
||||
preamp: selectedPeq.preamp ?? 0,
|
||||
};
|
||||
const res = await createShareCode(mac, eqData);
|
||||
if (res.code !== 200) {
|
||||
toast.error(resolveShareApiMessage("create", res, eqUi));
|
||||
return;
|
||||
}
|
||||
setShareCode(res.share_code ?? "");
|
||||
setShareCodeExpireAt(res.expire_at ?? null);
|
||||
} catch {
|
||||
toast.error(resolveShareApiMessage("create", { code: 500 }, eqUi));
|
||||
} 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>
|
||||
{/* expiration time */}
|
||||
{shareCodeExpireAt && (
|
||||
<p className="mt-2 text-[11px] text-white/30">{eqUi.shareExpireAt}: {shareCodeExpireAt}</p>
|
||||
)}
|
||||
</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);
|
||||
setImportPresetName("");
|
||||
setQueriedShareCode("");
|
||||
// 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);
|
||||
setImportPresetName("");
|
||||
setQueriedShareCode("");
|
||||
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);
|
||||
setImportPresetName("");
|
||||
setQueriedShareCode("");
|
||||
// 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);
|
||||
setImportPresetName("");
|
||||
setQueriedShareCode("");
|
||||
try {
|
||||
const res = await queryShareCode(code);
|
||||
if (res.code !== 200) {
|
||||
toast.error(resolveShareApiMessage("query", res, eqUi));
|
||||
return;
|
||||
}
|
||||
const eq = res.eq_data;
|
||||
if (!eq) {
|
||||
toast.error(resolveShareApiMessage("query", { code: 0 }, eqUi));
|
||||
return;
|
||||
}
|
||||
const fetchedName = (eq.name as string) || "";
|
||||
setImportedEqData({
|
||||
name: fetchedName,
|
||||
brand: (eq.brand as string) || undefined,
|
||||
model: (eq.model as string) || undefined,
|
||||
target: (eq.target as string) || undefined,
|
||||
form: (eq.form as string) || undefined,
|
||||
filters: eq.filters,
|
||||
preamp: eq.preamp as number | undefined,
|
||||
autoPre: eq.autoPre as number | undefined,
|
||||
});
|
||||
setImportPresetName(fetchedName);
|
||||
setQueriedShareCode(code);
|
||||
} catch {
|
||||
toast.error(resolveShareApiMessage("query", { code: 500 }, eqUi));
|
||||
} 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 space-y-3" style={{ background: "rgba(0,255,246,0.06)", border: "1px solid rgba(0,255,246,0.2)" }}>
|
||||
<div>
|
||||
<p className="text-[12px] text-white/40 font-medium mb-1.5">{eqUi.importEqName}</p>
|
||||
<input
|
||||
value={importPresetName}
|
||||
onChange={(e) => setImportPresetName(e.target.value)}
|
||||
disabled={importSaving}
|
||||
className="h-10 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[14px] text-white/90 outline-none placeholder:text-white/30 focus:border-[#00FFF6]/40 disabled:opacity-60"
|
||||
placeholder={eqUi.importEqName}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
disabled={importSaving || !importPresetName.trim()}
|
||||
className={cn(
|
||||
"w-full rounded-full py-2.5 text-[13px] font-semibold text-black transition-all active:scale-[0.98]",
|
||||
importSaving || !importPresetName.trim()
|
||||
? "bg-[#00FFF6]/40 cursor-not-allowed"
|
||||
: "bg-[#00FFF6] hover:brightness-95",
|
||||
)}
|
||||
onClick={() => void handleImportClick()}
|
||||
>
|
||||
{importSaving ? (
|
||||
<span className="flex items-center justify-center gap-1.5">
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
{eqUi.importSaving}
|
||||
</span>
|
||||
) : (
|
||||
eqUi.importButton
|
||||
)}
|
||||
</button>
|
||||
</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.share_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.share_code.split("").map((ch: string, ci: number) => (
|
||||
<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 + expiration */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-[13px] text-white/85">
|
||||
{(item.eq_data?.name as string) ?? "—"}
|
||||
</div>
|
||||
{item.expire_at && (
|
||||
<p className="mt-0.5 truncate text-[11px] text-white/35">
|
||||
{eqUi.shareExpireAt}: {item.expire_at}
|
||||
</p>
|
||||
)}
|
||||
</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.share_code)}
|
||||
>
|
||||
<Copy size={13} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { getFilterType } from "@/lib/peqAudio";
|
||||
import type { PeqFilter, PeqState } from "@/lib/luxsinApi";
|
||||
import { normalizePeqFiltersForSubmit, type PeqFilter, type PeqState } from "@/lib/luxsinApi";
|
||||
import type { EqBand } from "./types";
|
||||
|
||||
export function cloneBands(source: EqBand[]) {
|
||||
@@ -54,3 +54,15 @@ export function bandToPeqFilter(b: {
|
||||
type: getFilterType(b.type),
|
||||
};
|
||||
}
|
||||
|
||||
export function importedFiltersToPeqFilters(filters: unknown): PeqFilter[] {
|
||||
return normalizePeqFiltersForSubmit(filters).map((f) => {
|
||||
const item = f as unknown as Record<string, unknown>;
|
||||
return {
|
||||
fc: Number(item.fc ?? item.freq ?? item.frequency ?? 1000),
|
||||
gain: Number(item.gain ?? 0),
|
||||
q: Number(item.q ?? 1),
|
||||
type: getFilterType(item.type as string | number),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { PeqEqUi } from "./types";
|
||||
|
||||
export type ShareApiAction = "create" | "query" | "accept" | "list";
|
||||
|
||||
export function resolveShareApiMessage(
|
||||
action: ShareApiAction,
|
||||
res: { code: number; msg?: string },
|
||||
eqUi: PeqEqUi,
|
||||
): string {
|
||||
if (res.code === 200) return "";
|
||||
|
||||
if (action === "list") {
|
||||
return eqUi.mySharesLoadFail ?? "Failed to load share list";
|
||||
}
|
||||
|
||||
if (res.code === 0) {
|
||||
if (action === "create") {
|
||||
return eqUi.shareActiveExists ?? eqUi.shareCreateFail ?? "Failed to generate share code";
|
||||
}
|
||||
return eqUi.importCodeNotFound ?? "Share code not found or expired";
|
||||
}
|
||||
|
||||
if (res.code === 400) {
|
||||
return eqUi.shareInvalidParams ?? eqUi.shareCreateFail ?? "Invalid request";
|
||||
}
|
||||
|
||||
if (res.code === 500) {
|
||||
return eqUi.shareSystemError ?? eqUi.shareCreateFail ?? "System error";
|
||||
}
|
||||
|
||||
if (action === "create") {
|
||||
return eqUi.shareCreateFail ?? "Failed to generate share code";
|
||||
}
|
||||
|
||||
if (action === "accept") {
|
||||
return eqUi.importFail ?? eqUi.importCodeNotFound ?? "Failed to import EQ";
|
||||
}
|
||||
|
||||
return eqUi.importCodeNotFound ?? "Share code not found or expired";
|
||||
}
|
||||
Reference in New Issue
Block a user