逐步添加本地保存功能

2025-10-11 20:43:43 +08:00
parent 2edfb0afb4
commit 85085ba5ff
5 changed files with 125 additions and 39 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
        "edge-tts-universal": "^1.3.2",
        "next": "15.5.3",
        "react": "19.1.0",
-        "react-dom": "19.1.0"
+        "react-dom": "19.1.0",
+        "zod": "^3.25.76"
      },
      "devDependencies": {
        "@eslint/eslintrc": "^3",
@@ -14938,8 +14939,6 @@
      "resolved": "https://mirrors.cloud.tencent.com/npm/zod/-/zod-3.25.76.tgz",
      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
      "license": "MIT",
-      "optional": true,
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
    "edge-tts-universal": "^1.3.2",
    "next": "15.5.3",
    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "zod": "^3.25.76"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
--- a/public/images/save_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg
+++ b/public/images/save_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z"/></svg>
--- a/src/app/text-speaker/page.tsx
+++ b/src/app/text-speaker/page.tsx
@@ -6,14 +6,17 @@ import IMAGES from "@/config/images";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
 import { getTTSAudioUrl } from "@/utils";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
+import z from "zod";

 export default function Home() {
+    const [showSpeedAdjust, setShowSpeedAdjust] = useState(false);
    const [ipaEnabled, setIPAEnabled] = useState(false);
    const [speed, setSpeed] = useState(1);
    const [pause, setPause] = useState(true);
    const [autopause, setAutopause] = useState(true);
    const textRef = useRef('');
-    const localeRef = useRef<string | null>(null);
+    // const localeRef = useRef<string | null>(null);
+    const [locale, setLocale] = useState<string | null>(null);
    const [ipa, setIPA] = useState<string>('');
    const objurlRef = useRef<string | null>(null);
    const [processing, setProcessing] = useState(false);
@@ -90,9 +93,9 @@ export default function Home() {
                    });
                    try {
                        const textinfo = await (await fetch(`/api/locale?${params}`)).json();
-                        localeRef.current = textinfo.locale;
+                        setLocale(textinfo.locale);

-                        const voice = voicesData.find(v => v.locale.startsWith(localeRef.current!));
+                        const voice = voicesData.find(v => v.locale.startsWith(textinfo.locale));
                        if (!voice) throw 'Voice not found.';

                        objurlRef.current = await getTTSAudioUrl(
@@ -112,7 +115,7 @@ export default function Home() {
                        console.error(e);

                        setPause(true);
-                        localeRef.current = null;
+                        setLocale(null);

                        setProcessing(false);
                    }
@@ -129,7 +132,7 @@ export default function Home() {

    const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
        textRef.current = e.target.value.trim();
-        localeRef.current = null;
+        setLocale(null);
        setIPA('');
        if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
        objurlRef.current = null;
@@ -147,6 +150,62 @@ export default function Home() {
        }
    }

+    const TextSpeakerItemSchema = z.object({
+        text: z.string(),
+        ipa: z.string().optional(),
+        locale: z.string()
+    });
+    const TextSpeakerArraySchema = z.array(TextSpeakerItemSchema);
+
+    const save = () => {
+        if (!locale) return;
+
+        const getTextSpeakerData = () => {
+            try {
+                const item = localStorage.getItem('text-speaker');
+
+                if (!item) return [];
+
+                const rawData = JSON.parse(item);
+                const result = TextSpeakerArraySchema.safeParse(rawData);
+
+                if (result.success) {
+                    return result.data;
+                } else {
+                    console.error('Invalid data structure in localStorage:', result.error);
+                    return [];
+                }
+            } catch (e) {
+                console.error('Failed to parse text-speaker data:', e);
+                return [];
+            }
+        }
+
+        const save = getTextSpeakerData();
+        const oldIndex = save.findIndex(v => v.text === textRef.current);
+        if (oldIndex !== -1) {
+            const oldItem = save[oldIndex];
+            if ((ipa && !oldItem.ipa) || (ipa && oldItem.ipa !== ipa)) {
+                oldItem.ipa = ipa;
+                localStorage.setItem('text-speaker', JSON.stringify(save));
+                return;
+            }
+        }
+        if (ipa.length === 0) {
+            save.push({
+                text: textRef.current,
+                locale: locale
+            });
+        } else {
+            save.push({
+                text: textRef.current,
+                locale: locale,
+                ipa: ipa
+            });
+        }
+        localStorage.setItem('text-speaker', JSON.stringify(save));
+    }
+
    return (<>
        <div className="my-4 p-4 mx-4 md:mx-32 border-1 border-gray-200 rounded-2xl">
            <textarea className="text-2xl resize-none focus:outline-0 min-h-64 w-full"
@@ -155,42 +214,67 @@ export default function Home() {
            <div className="overflow-auto text-gray-600 h-18">
                {ipa}
            </div>
-            <div className="w-full flex flex-row gap-2 justify-center items-center">
-                <Button label="generate ipa" selected={ipaEnabled} onClick={() => setIPAEnabled(!ipaEnabled)}></Button>
+            <div className="w-full flex flex-row flex-wrap gap-2 justify-center items-center">
+                <IconClick size={45} onClick={speak} src={
+                    pause ? IMAGES.play_arrow : IMAGES.pause
+                } alt="playorpause" className={`${processing ? 'bg-gray-200' : ''}`}></IconClick>
                <IconClick size={45} onClick={() => {
                    setAutopause(!autopause); if (objurlRef) { stopAudio(); } setPause(true);
                }} src={
                    autopause ? IMAGES.autoplay : IMAGES.autopause
                } alt="autoplayorpause"
                ></IconClick>
-                <IconClick size={45} onClick={speak} src={
-                    pause ? IMAGES.play_arrow : IMAGES.pause
-                } alt="playorpause" className={`${processing ? 'bg-gray-200' : ''}`}></IconClick>
-                <IconClick size={45} onClick={letMeSetSpeed(0.5)}
-                    src={IMAGES.speed_0_5x}
-                    alt="0.5x"
-                    className={speed === 0.5 ? 'bg-gray-200' : ''}
-                ></IconClick>
-                <IconClick size={45} onClick={letMeSetSpeed(0.7)}
-                    src={IMAGES.speed_0_7x}
-                    alt="0.7x"
-                    className={speed === 0.7 ? 'bg-gray-200' : ''}
-                ></IconClick>
-                <IconClick size={45} onClick={letMeSetSpeed(1)}
-                    src={IMAGES.speed_1x}
-                    alt="1x"
-                    className={speed === 1 ? 'bg-gray-200' : ''}
-                ></IconClick>
-                <IconClick size={45} onClick={letMeSetSpeed(1.2)}
-                    src={IMAGES.speed_1_2_x}
-                    alt="1.2x"
-                    className={speed === 1.2 ? 'bg-gray-200' : ''}
-                ></IconClick>
-                <IconClick size={45} onClick={letMeSetSpeed(1.5)}
-                    src={IMAGES.speed_1_5x}
-                    alt="1.5x"
-                    className={speed === 1.5 ? 'bg-gray-200' : ''}
-                ></IconClick>
+                <span>{localStorage.getItem('text-speaker')}</span>
+                <IconClick size={45} onClick={() => setShowSpeedAdjust(!showSpeedAdjust)}
+                    src={IMAGES.more_horiz}
+                    alt="more"></IconClick>
+                {locale ? (<IconClick size={45} onClick={save}
+                    src={IMAGES.save}
+                    alt="save"></IconClick>) : (<></>)}
+                <div className="w-full flex flex-row flex-wrap gap-2 justify-center items-center">
+
+                    <Button label="生成IPA"
+                        selected={ipaEnabled}
+                        onClick={() => setIPAEnabled(!ipaEnabled)}>
+                    </Button>
+                    <Button label="删除所有保存项"
+                        onClick={() => localStorage.setItem('text-speaker', '[]')}>
+                    </Button>
+                    <Button label="查看保存项"
+                        onClick={}>
+                    </Button>
+                </div>
+                <div className="w-full flex flex-row flex-wrap gap-2 justify-center items-center">
+                    {
+                        showSpeedAdjust ? (<>
+                            <IconClick size={45} onClick={letMeSetSpeed(0.5)}
+                                src={IMAGES.speed_0_5x}
+                                alt="0.5x"
+                                className={speed === 0.5 ? 'bg-gray-200' : ''}
+                            ></IconClick>
+                            <IconClick size={45} onClick={letMeSetSpeed(0.7)}
+                                src={IMAGES.speed_0_7x}
+                                alt="0.7x"
+                                className={speed === 0.7 ? 'bg-gray-200' : ''}
+                            ></IconClick>
+                            <IconClick size={45} onClick={letMeSetSpeed(1)}
+                                src={IMAGES.speed_1x}
+                                alt="1x"
+                                className={speed === 1 ? 'bg-gray-200' : ''}
+                            ></IconClick>
+                            <IconClick size={45} onClick={letMeSetSpeed(1.2)}
+                                src={IMAGES.speed_1_2_x}
+                                alt="1.2x"
+                                className={speed === 1.2 ? 'bg-gray-200' : ''}
+                            ></IconClick>
+                            <IconClick size={45} onClick={letMeSetSpeed(1.5)}
+                                src={IMAGES.speed_1_5x}
+                                alt="1.5x"
+                                className={speed === 1.5 ? 'bg-gray-200' : ''}
+                            ></IconClick>
+                        </>) : <></>
+                    }
+                </div>
            </div>
        </div >
    </>);
--- a/src/config/images.ts
+++ b/src/config/images.ts
@@ -12,6 +12,7 @@ const IMAGES = {
    close: '/images/close_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
    refresh: '/images/refresh_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
    more_horiz: '/images/more_horiz_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    save: '/images/save_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
 }

 export default IMAGES;
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z"/></svg>`