fix(web): hydrate-safe danmaku settings init without render localStorage

app/web/src/components/pages/DanmakuSettingsBody.tsx

@@ -80,14 +80,25 @@ function Inner(props: { locale: Locale }) {
     const save = trpc.media.danmakuSaveSettings.useMutation();
     const filledFromServer = useRef(false);
 
-    const initial = readSettings();
+    // SSR 与水合首帧共用 FALLBACK，避免 localStorage 差异导致 hydration 不一致
-    const [enabled, setEnabled] = useState(initial.enabled);
+    const [enabled, setEnabled] = useState(FALLBACK.enabled);
-    const [opacity, setOpacity] = useState(initial.opacity);
+    const [opacity, setOpacity] = useState(FALLBACK.opacity);
-    const [density, setDensity] = useState(initial.density);
+    const [density, setDensity] = useState(FALLBACK.density);
-    const [blockKeywords, setBlockKeywords] = useState<string[]>(initial.blockKeywords);
+    const [blockKeywords, setBlockKeywords] = useState<string[]>(() => []);
-    const [blockTypes, setBlockTypes] = useState<BlockType[]>(initial.blockTypes);
+    const [blockTypes, setBlockTypes] = useState<BlockType[]>(() => []);
     const [kwInput, setKwInput] = useState("");
 
+    // 挂载后再读 localStorage 作初值/回退（客户端 only）
+    useEffect(() => {
+        const local = readSettings();
+        if (filledFromServer.current) return;
+        setEnabled(local.enabled);
+        setOpacity(local.opacity);
+        setDensity(local.density);
+        setBlockKeywords(local.blockKeywords);
+        setBlockTypes(local.blockTypes);
+    }, []);
+
     useEffect(() => {
         const data = prefsQuery.data;
         if (!data || filledFromServer.current) return;