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/locales/data-de.json
+1
View File
@@ -230,6 +230,7 @@
"addPresetTitle": "Neue Voreinstellung",
"addPresetNameEmpty": "Name darf nicht leer sein",
"addPresetNameExists": "Dieser Name existiert bereits. Wählen Sie einen anderen.",
"addPresetNameTooLong": "Name darf maximal 80 Zeichen lang sein",
"overwritePresetTitle": "Voreinstellung existiert bereits",
"overwritePresetDesc": "Eine Voreinstellung mit dem Namen \"{{name}}\" existiert bereits. Überschreiben?",
"overwritePresetConfirm": "Überschreiben",
client/src/locales/data-en.json
+1
View File
@@ -230,6 +230,7 @@
"addPresetTitle": "New preset",
"addPresetNameEmpty": "Name cannot be empty",
"addPresetNameExists": "That name already exists. Choose another.",
"addPresetNameTooLong": "Name cannot exceed 80 characters",
"overwritePresetTitle": "Preset name already exists",
"overwritePresetDesc": "A preset named \"{{name}}\" already exists. Overwrite it?",
"overwritePresetConfirm": "Overwrite",
client/src/locales/data-es.json
+1
View File
@@ -230,6 +230,7 @@
"addPresetTitle": "Nuevo preset",
"addPresetNameEmpty": "El nombre no puede estar vacío",
"addPresetNameExists": "Ese nombre ya existe. Elija otro.",
"addPresetNameTooLong": "El nombre no puede superar los 80 caracteres",
"overwritePresetTitle": "El nombre del preset ya existe",
"overwritePresetDesc": "Un preset llamado \"{{name}}\" ya existe. ¿Sobrescribirlo?",
"overwritePresetConfirm": "Sobrescribir",
client/src/locales/data-fr.json
+1
View File
@@ -230,6 +230,7 @@
"addPresetTitle": "Nouveau préréglage",
"addPresetNameEmpty": "Le nom ne peut pas être vide",
"addPresetNameExists": "Ce nom existe déjà. Choisissez-en un autre.",
"addPresetNameTooLong": "Le nom ne peut pas dépasser 80 caractères",
"overwritePresetTitle": "Le nom du préréglage existe déjà",
"overwritePresetDesc": "Un préréglage nommé \"{{name}}\" existe déjà. L'écraser ?",
"overwritePresetConfirm": "Écraser",
client/src/locales/data-zh-HK.json
+1
View File
@@ -223,6 +223,7 @@
"addPresetTitle": "新增預設",
"addPresetNameEmpty": "名稱不能為空",
"addPresetNameExists": "名稱已存在，請修改後再儲存",
"addPresetNameTooLong": "名稱不能超過 80 個字元",
"overwritePresetTitle": "預設名稱已存在",
"overwritePresetDesc": "預設「{{name}}」已存在，確認覆蓋原有資料嗎？",
"overwritePresetConfirm": "覆蓋",
client/src/locales/data-zh.json
+1
View File
@@ -223,6 +223,7 @@
"addPresetTitle": "新增预设",
"addPresetNameEmpty": "名称不能为空",
"addPresetNameExists": "名称已存在，请修改后再保存",
"addPresetNameTooLong": "名称不能超过 80 个字符",
"overwritePresetTitle": "预设名称已存在",
"overwritePresetDesc": "预设「{{name}}」已存在，确认覆盖原有数据吗？",
"overwritePresetConfirm": "覆盖",
client/src/pages/EQPage.tsx
+13
View File
@@ -84,6 +84,7 @@ import { BrandDrawer } from "./eq/components/BrandDrawer";
import { PeqOverwriteConfirmDialog } from "./eq/components/PeqOverwriteConfirmDialog";
import { PeqPresetManageDialog } from "./eq/components/PeqPresetManageDialog";
import { useRawCurve } from "./eq/hooks/useRawCurve";
import { isPeqPresetNameTooLong } from "./eq/peqPresetName";
/* ── Default bands imported from eq/constants ── */
@@ -606,6 +607,10 @@ export default function EQPage() {
toast.error(eqUi.addPresetNameEmpty);
return;
}
if (isPeqPresetNameTooLong(nextName)) {
toast.error(eqUi.addPresetNameTooLong);
return;
}
if (headphoneModels.includes(nextName)) {
toast.error(eqUi.addPresetNameExists);
return;
@@ -701,6 +706,10 @@ export default function EQPage() {
toast.error(eqUi.addPresetNameEmpty);
return;
}
if (isPeqPresetNameTooLong(nextName)) {
toast.error(eqUi.addPresetNameTooLong);
return;
}
if (headphoneModels.includes(nextName)) {
toast.error(eqUi.addPresetNameExists);
return;
@@ -779,6 +788,10 @@ export default function EQPage() {
toast.error(eqUi.addPresetNameEmpty);
return;
}
if (isPeqPresetNameTooLong(nextName)) {
toast.error(eqUi.addPresetNameTooLong);
return;
}
if (!shareCode.trim()) {
toast.error(eqUi.importCodeNotFound);
return;
client/src/pages/eq/components/AddPresetDialog.tsx
+23 -12
View File
@@ -1,6 +1,9 @@
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
import type { PeqEqUi } from "../constants";
import { PEQ_PRESET_NAME_MAX_LENGTH } from "../constants";
import { clampPeqPresetName } from "../peqPresetName";
import { PeqPresetNameLengthHint } from "./PeqPresetNameLengthHint";
export function AddPresetDialog({
open,
@@ -63,12 +66,16 @@ export function AddPresetDialog({
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"
/>
<div className="min-w-0 flex-1">
<input
value={copyName}
onChange={(e) => onCopyNameChange(clampPeqPresetName(e.target.value))}
onClick={(e) => e.stopPropagation()}
maxLength={PEQ_PRESET_NAME_MAX_LENGTH}
className="h-10 w-full 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"
/>
<PeqPresetNameLengthHint value={copyName} />
</div>
</label>
<label
@@ -84,12 +91,16 @@ export function AddPresetDialog({
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"
/>
<div className="min-w-0 flex-1">
<input
value={flatName}
onChange={(e) => onFlatNameChange(clampPeqPresetName(e.target.value))}
onClick={(e) => e.stopPropagation()}
maxLength={PEQ_PRESET_NAME_MAX_LENGTH}
className="h-10 w-full 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"
/>
<PeqPresetNameLengthHint value={flatName} />
</div>
</label>
</div>
client/src/pages/eq/components/PeqPresetManageDialog.tsx
+17 -6
View File
@@ -3,6 +3,9 @@ import { X, Trash2, Pencil, Check, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import type { PeqEqUi } from "../constants";
import { PEQ_PRESET_NAME_MAX_LENGTH } from "../constants";
import { clampPeqPresetName, isPeqPresetNameTooLong } from "../peqPresetName";
import { PeqPresetNameLengthHint } from "./PeqPresetNameLengthHint";
/* ── Custom checkbox ── */
function Checkbox({
@@ -133,6 +136,10 @@ export function PeqPresetManageDialog({
toast.error(eqUi.renameEmptyName);
return;
}
if (isPeqPresetNameTooLong(nextName)) {
toast.error(eqUi.addPresetNameTooLong);
return;
}
const oldItem = items[editingIdx];
if (!oldItem) return;
if (nextName === oldItem.name) {
@@ -266,12 +273,14 @@ export function PeqPresetManageDialog({
<div className="min-w-0 flex-1">
{isEditing ? (
<div className="flex items-center gap-2">
<input
value={editingName}
onChange={e => setEditingName(e.target.value)}
className="h-9 min-w-0 flex-1 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"
/>
<div className="space-y-1">
<div className="flex items-center gap-2">
<input
value={editingName}
onChange={e => setEditingName(clampPeqPresetName(e.target.value))}
maxLength={PEQ_PRESET_NAME_MAX_LENGTH}
className="h-9 min-w-0 flex-1 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"
/>
<button
type="button"
disabled={renaming}
@@ -300,6 +309,8 @@ export function PeqPresetManageDialog({
>
取消
</button>
</div>
<PeqPresetNameLengthHint value={editingName} />
</div>
) : (
<div
client/src/pages/eq/components/PeqPresetNameLengthHint.tsx
+9
View File
@@ -0,0 +1,9 @@
import { peqPresetNameLengthText } from "../peqPresetName";
export function PeqPresetNameLengthHint({ value }: { value: string }) {
return (
<p className="mt-1 text-right text-[11px] text-white/35 tabular-nums">
{peqPresetNameLengthText(value)}
</p>
);
}
client/src/pages/eq/components/SaveBDialog.tsx
+13 -6
View File
@@ -1,5 +1,8 @@
import { X } from "lucide-react";
import type { PeqEqUi } from "../constants";
import { PEQ_PRESET_NAME_MAX_LENGTH } from "../constants";
import { clampPeqPresetName } from "../peqPresetName";
import { PeqPresetNameLengthHint } from "./PeqPresetNameLengthHint";
export function SaveBDialog({
open,
@@ -40,12 +43,16 @@ export function SaveBDialog({
</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>
<input
value={presetName}
onChange={(e) => onNameChange(clampPeqPresetName(e.target.value))}
maxLength={PEQ_PRESET_NAME_MAX_LENGTH}
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
/>
<PeqPresetNameLengthHint value={presetName} />
</div>
<div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
<button
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)",
client/src/pages/eq/constants.ts
+3
View File
@@ -25,6 +25,9 @@ export const BAND_Q_MAX = 10;
/** Maximum headphone PEQ presets stored on device. */
export const PEQ_PRESET_MAX = 50;
/** Maximum characters for a custom PEQ preset name (letter, CJK, symbol, or space = 1). */
export const PEQ_PRESET_NAME_MAX_LENGTH = 80;
export type BandParamKind = "freq" | "gain" | "q";
/* ── Band param value box style ── */
client/src/pages/eq/peqPresetName.ts
+13
View File
@@ -0,0 +1,13 @@
import { PEQ_PRESET_NAME_MAX_LENGTH } from "./constants";
export function clampPeqPresetName(value: string): string {
return value.slice(0, PEQ_PRESET_NAME_MAX_LENGTH);
}
export function isPeqPresetNameTooLong(value: string): boolean {
return value.trim().length > PEQ_PRESET_NAME_MAX_LENGTH;
}
export function peqPresetNameLengthText(value: string): string {
return `${value.length}/${PEQ_PRESET_NAME_MAX_LENGTH}`;
}
client/src/pages/eq/utils.ts
+5 -3
View File
@@ -11,6 +11,7 @@ import {
type BandParamKind,
type PeqCatalogItem,
} from "./constants";
import { clampPeqPresetName } from "./peqPresetName";
/* ── Template interpolation ── */
export function eqInterp(
@@ -190,12 +191,13 @@ export function getUniquePresetName(
base: string,
existingNames: string[],
) {
if (!existingNames.includes(base)) return base;
const clippedBase = clampPeqPresetName(base);
if (!existingNames.includes(clippedBase)) return clippedBase;
let index = 1;
while (existingNames.includes(`${base}_${index}`)) {
while (existingNames.includes(clampPeqPresetName(`${clippedBase}_${index}`))) {
index += 1;
}
return `${base}_${index}`;
return clampPeqPresetName(`${clippedBase}_${index}`);
}
/** Normalize shared/imported EQ filters into device PeqFilter[]. */