优化分享页面

client/src/pages/eq/components/PeqPresetManageDialog.tsx

@@ -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