修正预览模式不能正确设置单词渐变宽度的问题

src/components/RibbonBar/preview-mode.tsx

@@ -9,15 +9,11 @@
  * https://github.com/Steve-xmh/amll-ttml-tool/blob/main/LICENSE
  */
 
-import {
-	lyricWordFadeWidthAtom,
-	showRomanLinesAtom,
-	showTranslationLinesAtom,
-} from "$/states/preview.ts";
-import { Checkbox, Grid, Text, TextField } from "@radix-ui/themes";
-import { useAtom } from "jotai";
-import { forwardRef } from "react";
-import { RibbonFrame, RibbonSection } from "./common";
+import {lyricWordFadeWidthAtom, showRomanLinesAtom, showTranslationLinesAtom,} from "$/states/preview.ts";
+import {Checkbox, Grid, Text, TextField} from "@radix-ui/themes";
+import {useAtom} from "jotai";
+import {forwardRef} from "react";
+import {RibbonFrame, RibbonSection} from "./common";
 
 export const PreviewModeRibbonBar = forwardRef<HTMLDivElement>(
 	(_props, ref) => {
@@ -61,8 +57,13 @@ export const PreviewModeRibbonBar = forwardRef<HTMLDivElement>(
 							style={{
 								width: "4em",
 							}}
-							value={lyricWordFadeWidth}
-							onChange={(e) => setLyricWordFadeWidth(e.target.valueAsNumber)}
+							defaultValue={lyricWordFadeWidth}
+							onBlur={(e) => {
+								const value = Number.parseFloat(e.target.value);
+								if (Number.isFinite(value)) {
+									setLyricWordFadeWidth(value);
+								}
+							}}
 						/>
 					</Grid>
 				</RibbonSection>