新增 build:test 方便构建线上的测试环境,优化分享码功能的交互
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { useRef } from "react";
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||
import {
|
||||
AlertDialog,
|
||||
@@ -32,11 +33,16 @@ export function PeqOverwriteConfirmDialog({
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
const actionTakenRef = useRef(false);
|
||||
|
||||
return (
|
||||
<AlertDialog
|
||||
open={open}
|
||||
onOpenChange={(next) => {
|
||||
if (!next) onCancel();
|
||||
if (!next) {
|
||||
if (!actionTakenRef.current) onCancel();
|
||||
actionTakenRef.current = false;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<AlertDialogPortal>
|
||||
@@ -56,13 +62,18 @@ export function PeqOverwriteConfirmDialog({
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel
|
||||
className="border-white/20 bg-transparent text-white hover:bg-white/10"
|
||||
onPointerDown={(e) => e.preventDefault()}
|
||||
onClick={onCancel}
|
||||
>
|
||||
{cancelLabel}
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-[#00FFF6] text-black hover:brightness-95 focus-visible:ring-[#00FFF6]"
|
||||
onClick={onConfirm}
|
||||
onPointerDown={(e) => e.preventDefault()}
|
||||
onClick={() => {
|
||||
actionTakenRef.current = true;
|
||||
onConfirm();
|
||||
}}
|
||||
>
|
||||
{confirmLabel}
|
||||
</AlertDialogAction>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { useState } from "react";
|
||||
import { X, Copy, Loader2 } from "lucide-react";
|
||||
import { X, Copy, Loader2, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { toast } from "sonner";
|
||||
import { acceptShareCode, createShareCode, listShareCodes, queryShareCode } from "@/lib/luxsinApi";
|
||||
import { acceptShareCode, createShareCode, deleteShareCode, listShareCodes, queryShareCode, resolveShareDeviceModel } from "@/lib/luxsinApi";
|
||||
import type { PeqEqUi } from "../types";
|
||||
import { resolveShareApiMessage } from "../shareMessages";
|
||||
import { eqInterp } from "../eqFormatters";
|
||||
import { PeqOverwriteConfirmDialog } from "./PeqOverwriteConfirmDialog";
|
||||
|
||||
type PeqItem = {
|
||||
name: string;
|
||||
@@ -40,6 +42,7 @@ export function ShareDialog({
|
||||
eqUi,
|
||||
peqCardLabels,
|
||||
mac,
|
||||
device,
|
||||
isDemoMode,
|
||||
onImportEq,
|
||||
}: {
|
||||
@@ -50,6 +53,7 @@ export function ShareDialog({
|
||||
eqUi: PeqEqUi;
|
||||
peqCardLabels: PeqCardLabels;
|
||||
mac: string;
|
||||
device: string;
|
||||
isDemoMode: boolean;
|
||||
onImportEq: (data: ImportedEqData, shareCode: string) => void | Promise<void>;
|
||||
}) {
|
||||
@@ -63,9 +67,34 @@ export function ShareDialog({
|
||||
const [importPresetName, setImportPresetName] = useState("");
|
||||
const [queriedShareCode, setQueriedShareCode] = useState("");
|
||||
const [importedEqData, setImportedEqData] = useState<ImportedEqData | null>(null);
|
||||
const [importedSourceModel, setImportedSourceModel] = useState<string | 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 [deleteConfirmCode, setDeleteConfirmCode] = useState<string | null>(null);
|
||||
const [deletingShareCode, setDeletingShareCode] = useState<string | null>(null);
|
||||
|
||||
const handleDeleteConfirm = () => {
|
||||
const code = deleteConfirmCode;
|
||||
if (!code || !mac || deletingShareCode) return;
|
||||
setDeleteConfirmCode(null);
|
||||
setDeletingShareCode(code);
|
||||
void (async () => {
|
||||
try {
|
||||
const res = await deleteShareCode(mac, code);
|
||||
if (res.code !== 200) {
|
||||
toast.error(resolveShareApiMessage("delete", res, eqUi));
|
||||
return;
|
||||
}
|
||||
setMySharesList((prev) => prev.filter((item) => item.share_code !== code));
|
||||
toast.success(eqUi.mySharesDeleteSuccess);
|
||||
} catch {
|
||||
toast.error(resolveShareApiMessage("delete", { code: 500 }, eqUi));
|
||||
} finally {
|
||||
setDeletingShareCode(null);
|
||||
}
|
||||
})();
|
||||
};
|
||||
|
||||
const handleImportClick = async () => {
|
||||
if (importSaving || !importedEqData || !queriedShareCode) return;
|
||||
@@ -75,7 +104,12 @@ export function ShareDialog({
|
||||
setImportSaving(true);
|
||||
try {
|
||||
if (!isDemoMode && mac) {
|
||||
const acceptRes = await acceptShareCode(mac, queriedShareCode);
|
||||
const shareDeviceModel = resolveShareDeviceModel(device);
|
||||
if (!shareDeviceModel) {
|
||||
toast.error(eqUi.shareInvalidParams);
|
||||
return;
|
||||
}
|
||||
const acceptRes = await acceptShareCode(mac, shareDeviceModel, queriedShareCode);
|
||||
if (acceptRes.code !== 200) {
|
||||
toast.error(resolveShareApiMessage("accept", acceptRes, eqUi));
|
||||
return;
|
||||
@@ -108,10 +142,13 @@ export function ShareDialog({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
|
||||
onClick={() => {
|
||||
if (!importSaving) onClose();
|
||||
onClick={(e) => {
|
||||
if (e.target !== e.currentTarget) return;
|
||||
if (importSaving || deleteConfirmCode !== null || deletingShareCode) return;
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -260,7 +297,12 @@ export function ShareDialog({
|
||||
autoPre: selectedPeq.autoPre ?? 0,
|
||||
preamp: selectedPeq.preamp ?? 0,
|
||||
};
|
||||
const res = await createShareCode(mac, eqData);
|
||||
const shareDeviceModel = resolveShareDeviceModel(device);
|
||||
if (!shareDeviceModel) {
|
||||
toast.error(eqUi.shareInvalidParams);
|
||||
return;
|
||||
}
|
||||
const res = await createShareCode(mac, shareDeviceModel, eqData);
|
||||
if (res.code !== 200) {
|
||||
toast.error(resolveShareApiMessage("create", res, eqUi));
|
||||
return;
|
||||
@@ -352,6 +394,7 @@ export function ShareDialog({
|
||||
next[i] = val;
|
||||
setImportCodeInputs(next);
|
||||
setImportedEqData(null);
|
||||
setImportedSourceModel(null);
|
||||
setImportPresetName("");
|
||||
setQueriedShareCode("");
|
||||
// auto-focus next box
|
||||
@@ -367,6 +410,7 @@ export function ShareDialog({
|
||||
next[i - 1] = "";
|
||||
setImportCodeInputs(next);
|
||||
setImportedEqData(null);
|
||||
setImportedSourceModel(null);
|
||||
setImportPresetName("");
|
||||
setQueriedShareCode("");
|
||||
const prev = (e.target as HTMLElement).previousElementSibling as HTMLInputElement | null;
|
||||
@@ -383,6 +427,7 @@ export function ShareDialog({
|
||||
}
|
||||
setImportCodeInputs(next);
|
||||
setImportedEqData(null);
|
||||
setImportedSourceModel(null);
|
||||
setImportPresetName("");
|
||||
setQueriedShareCode("");
|
||||
// focus last filled or last box
|
||||
@@ -412,6 +457,7 @@ export function ShareDialog({
|
||||
const code = importCodeInputs.join("");
|
||||
setImportQuerying(true);
|
||||
setImportedEqData(null);
|
||||
setImportedSourceModel(null);
|
||||
setImportPresetName("");
|
||||
setQueriedShareCode("");
|
||||
try {
|
||||
@@ -437,6 +483,7 @@ export function ShareDialog({
|
||||
autoPre: eq.autoPre as number | undefined,
|
||||
});
|
||||
setImportPresetName(fetchedName);
|
||||
setImportedSourceModel(res.model ?? null);
|
||||
setQueriedShareCode(code);
|
||||
} catch {
|
||||
toast.error(resolveShareApiMessage("query", { code: 500 }, eqUi));
|
||||
@@ -458,8 +505,16 @@ export function ShareDialog({
|
||||
{/* 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)" }}>
|
||||
{importedSourceModel && (
|
||||
<p className="text-[12px] text-white/60">
|
||||
{eqUi.importSourceModel}: <span className="text-white/90">{importedSourceModel}</span>
|
||||
</p>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-[12px] text-white/40 font-medium mb-1.5">{eqUi.importEqName}</p>
|
||||
<p className="text-[12px] text-white/40 font-medium mb-1.5">
|
||||
{eqUi.importEqName}
|
||||
<span className="font-normal text-white/35">({eqUi.importEqNameHint})</span>
|
||||
</p>
|
||||
<input
|
||||
value={importPresetName}
|
||||
onChange={(e) => setImportPresetName(e.target.value)}
|
||||
@@ -543,15 +598,33 @@ export function ShareDialog({
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{/* copy code button */}
|
||||
{/* copy + delete */}
|
||||
<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"
|
||||
disabled={!!deletingShareCode}
|
||||
className="shrink-0 w-7 h-7 rounded-[6px] flex items-center justify-center text-[#00FFF6]/70 active:scale-95 transition-transform disabled:opacity-40"
|
||||
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>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!!deletingShareCode || !mac}
|
||||
className="shrink-0 w-7 h-7 rounded-[6px] flex items-center justify-center text-red-400/80 active:scale-95 transition-transform disabled:opacity-40"
|
||||
style={{ background: "rgba(239,68,68,0.08)", border: "1px solid rgba(239,68,68,0.2)" }}
|
||||
title={eqUi.mySharesDeleteConfirmTitle}
|
||||
onClick={() => {
|
||||
if (deletingShareCode) return;
|
||||
setDeleteConfirmCode(item.share_code);
|
||||
}}
|
||||
>
|
||||
{deletingShareCode === item.share_code ? (
|
||||
<Loader2 size={13} className="animate-spin" />
|
||||
) : (
|
||||
<Trash2 size={13} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -560,5 +633,20 @@ export function ShareDialog({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PeqOverwriteConfirmDialog
|
||||
open={deleteConfirmCode !== null}
|
||||
title={eqUi.mySharesDeleteConfirmTitle}
|
||||
description={
|
||||
deleteConfirmCode
|
||||
? eqInterp(eqUi.mySharesDeleteConfirmDesc, { code: deleteConfirmCode })
|
||||
: ""
|
||||
}
|
||||
cancelLabel={eqUi.cancel}
|
||||
confirmLabel={eqUi.mySharesDeleteConfirmOk}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={() => setDeleteConfirmCode(null)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { PeqEqUi } from "./types";
|
||||
|
||||
export type ShareApiAction = "create" | "query" | "accept" | "list";
|
||||
export type ShareApiAction = "create" | "query" | "accept" | "list" | "delete";
|
||||
|
||||
export function resolveShareApiMessage(
|
||||
action: ShareApiAction,
|
||||
@@ -13,6 +13,19 @@ export function resolveShareApiMessage(
|
||||
return eqUi.mySharesLoadFail ?? "Failed to load share list";
|
||||
}
|
||||
|
||||
if (action === "delete") {
|
||||
if (res.code === 0) {
|
||||
return eqUi.mySharesDeleteFail ?? "Failed to delete share code";
|
||||
}
|
||||
if (res.code === 400) {
|
||||
return eqUi.shareInvalidParams ?? eqUi.mySharesDeleteFail ?? "Invalid request";
|
||||
}
|
||||
if (res.code === 500) {
|
||||
return eqUi.shareSystemError ?? eqUi.mySharesDeleteFail ?? "System error";
|
||||
}
|
||||
return eqUi.mySharesDeleteFail ?? "Failed to delete share code";
|
||||
}
|
||||
|
||||
if (res.code === 0) {
|
||||
if (action === "create") {
|
||||
return eqUi.shareActiveExists ?? eqUi.shareCreateFail ?? "Failed to generate share code";
|
||||
|
||||
Reference in New Issue
Block a user