优化分享页面

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

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