拆分 EQ 页面
This commit is contained in:
eafonyang
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user