audio/controller-v2
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化分享页面

Browse Source
This commit is contained in:
eafonyang
2026-06-26 12:03:31 +08:00
parent 540ece7ec6
commit 522bb602b3
16 changed files with 135 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/eq/components/ShareDialog.tsx
+25 -13
View File
@@ -7,6 +7,9 @@ import type { PeqEqUi } from "../constants";
import { resolveShareApiMessage } from "../shareMessages";
import { eqInterp } from "../utils";
import { PeqOverwriteConfirmDialog } from "./PeqOverwriteConfirmDialog";
import { PEQ_PRESET_NAME_MAX_LENGTH } from "../constants";
import { clampPeqPresetName, isPeqPresetNameTooLong } from "../peqPresetName";
import { PeqPresetNameLengthHint } from "./PeqPresetNameLengthHint";
type PeqItem = {
name: string;
@@ -100,6 +103,10 @@ export function ShareDialog({
if (importSaving || !importedEqData || !queriedShareCode) return;
const nextName = importPresetName.trim();
if (!nextName) return;
if (isPeqPresetNameTooLong(nextName)) {
toast.error(eqUi.addPresetNameTooLong);
return;
}
setImportSaving(true);
try {
@@ -144,7 +151,7 @@ export function ShareDialog({
return (
<>
<div
className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
className="fixed inset-0 z-[120] flex items-start justify-center overflow-y-auto bg-black/65 px-4 pb-8 pt-[22vh]"
onClick={(e) => {
if (e.target !== e.currentTarget) return;
if (importSaving || deleteConfirmCode !== null || deletingShareCode) return;
@@ -152,7 +159,7 @@ export function ShareDialog({
}}
>
<div
className="w-full max-w-[420px] rounded-[14px] p-5"
className="flex w-full max-w-[420px] flex-col 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)",
@@ -161,13 +168,16 @@ export function ShareDialog({
onClick={(e) => e.stopPropagation()}
>
{/* header */}
<div className="flex items-center justify-between mb-4">
<div className="mb-4 flex shrink-0 items-center gap-2">
{/* tab bar */}
<div className="flex gap-1 rounded-[10px] p-1" style={{ background: "rgba(44,44,46,0.8)" }}>
<div
className="grid min-w-0 flex-1 grid-cols-3 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",
"h-[34px] truncate rounded-[8px] px-2 text-center text-[13px] font-medium transition-colors",
shareDialogTab === "share"
? "bg-[#00FFF6] text-black font-semibold"
: "text-white/60 hover:text-white/80",
@@ -179,7 +189,7 @@ export function ShareDialog({
<button
type="button"
className={cn(
"px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
"h-[34px] truncate rounded-[8px] px-2 text-center text-[13px] font-medium transition-colors",
shareDialogTab === "import"
? "bg-[#00FFF6] text-black font-semibold"
: "text-white/60 hover:text-white/80",
@@ -191,7 +201,7 @@ export function ShareDialog({
<button
type="button"
className={cn(
"px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
"h-[34px] truncate rounded-[8px] px-2 text-center text-[13px] font-medium transition-colors",
shareDialogTab === "myShares"
? "bg-[#00FFF6] text-black font-semibold"
: "text-white/60 hover:text-white/80",
@@ -222,7 +232,7 @@ export function ShareDialog({
</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"
className="shrink-0 rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80 disabled:pointer-events-none disabled:opacity-40"
disabled={importSaving}
onClick={onClose}
>
@@ -238,7 +248,7 @@ export function ShareDialog({
{/* EQ preset list */}
<div
className="rounded-[10px] overflow-hidden max-h-48 overflow-y-auto mb-4"
className="mb-4 max-h-48 overflow-hidden overflow-y-auto rounded-[10px]"
style={{
background: "rgba(10,12,16,0.98)",
border: "1px solid rgba(0,255,246,0.35)",
@@ -482,7 +492,7 @@ export function ShareDialog({
preamp: eq.preamp as number | undefined,
autoPre: eq.autoPre as number | undefined,
});
setImportPresetName(fetchedName);
setImportPresetName(clampPeqPresetName(fetchedName));
setImportedSourceModel(res.model ?? null);
setQueriedShareCode(code);
} catch {
@@ -517,11 +527,13 @@ export function ShareDialog({
</p>
<input
value={importPresetName}
onChange={(e) => setImportPresetName(e.target.value)}
onChange={(e) => setImportPresetName(clampPeqPresetName(e.target.value))}
disabled={importSaving}
maxLength={PEQ_PRESET_NAME_MAX_LENGTH}
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}
/>
<PeqPresetNameLengthHint value={importPresetName} />
</div>
<button
type="button"
@@ -552,7 +564,7 @@ export function ShareDialog({
{shareDialogTab === "myShares" && (
<>
{mySharesLoading && mySharesList.length === 0 ? (
<div className="flex items-center justify-center py-10 gap-2 text-white/50">
<div className="flex items-center justify-center gap-2 py-10 text-white/50">
<Loader2 size={16} className="animate-spin" />
<span className="text-[13px]">{eqUi.mySharesLoading}</span>
</div>
@@ -560,7 +572,7 @@ export function ShareDialog({
<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"
className="max-h-64 overflow-hidden overflow-y-auto rounded-[10px]"
style={{
background: "rgba(10,12,16,0.98)",
border: "1px solid rgba(0,255,246,0.35)",