first commit

2025-10-16 09:57:36 +08:00
commit a4c051946f
62 changed files with 21882 additions and 0 deletions
--- a/src/app/text-speaker/SaveList.tsx
+++ b/src/app/text-speaker/SaveList.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { getTextSpeakerData, setTextSpeakerData } from "@/utils";
+import { useState } from "react";
+import z from "zod";
+import { TextSpeakerItemSchema } from "@/interfaces";
+import IconClick from "@/components/IconClick";
+import IMAGES from "@/config/images";
+
+interface TextCardProps {
+    item: z.infer<typeof TextSpeakerItemSchema>;
+    handleUse: (item: z.infer<typeof TextSpeakerItemSchema>) => void;
+    handleDel: (item: z.infer<typeof TextSpeakerItemSchema>) => void;
+}
+function TextCard({
+    item,
+    handleUse,
+    handleDel
+}: TextCardProps) {
+    const onUseClick = () => {
+        handleUse(item);
+    }
+    const onDelClick = () => {
+        handleDel(item);
+    }
+    return (
+        <div className="hover:cursor-pointer p-2 border-b-1 border-gray-200 rounded-2xl bg-gray-100 m-2 grid grid-cols-8" onClick={onUseClick}>
+            <div className="col-span-7">
+                <div className="max-h-26 text-3xl overflow-y-auto">{item.text}</div>
+                <div className="max-h-16 overflow-y-auto text-xl text-gray-600 whitespace-nowrap overflow-x-auto">{item.ipa}</div>
+            </div>
+            <div className="flex justify-center items-center border-gray-300 border-l-2 m-2">
+                <IconClick
+                    src={IMAGES.delete}
+                    alt="delete"
+                    onClick={onDelClick}
+                    className="place-self-center"
+                    size={42}>
+                </IconClick>
+            </div>
+        </div>
+    );
+}
+
+interface SaveListProps {
+    show?: boolean;
+    handleUse: (item: z.infer<typeof TextSpeakerItemSchema>) => void;
+}
+export default function SaveList({
+    show = false,
+    handleUse
+}: SaveListProps) {
+    const [data, setData] = useState(getTextSpeakerData());
+    const handleDel = (item: z.infer<typeof TextSpeakerItemSchema>) => {
+        const current_data = getTextSpeakerData();
+        current_data.splice(
+            current_data.findIndex(v => v.text === item.text)
+        );
+        setTextSpeakerData(current_data);
+    }
+    const refresh = () => {
+        setData(getTextSpeakerData());
+    }
+    const handleDeleteAll = () => {
+        const yesorno = prompt('确定删光吗？(Y/N)')?.trim();
+        if (yesorno && (yesorno === 'Y' || yesorno === 'y')) {
+            setTextSpeakerData([]);
+            refresh();
+        }
+    }
+    if (show) return (
+        <div className="my-4 p-2 mx-4 md:mx-32 border-1 border-gray-200 rounded-2xl" style={{ fontFamily: 'Times New Roman, serif' }}>
+            <div className="flex flex-row justify-center gap-8 items-center">
+                <IconClick
+                    src={IMAGES.refresh}
+                    alt="refresh"
+                    onClick={refresh}
+                    size={48}
+                    className=""></IconClick>
+                <IconClick
+                    src={IMAGES.delete}
+                    alt="delete"
+                    onClick={handleDeleteAll}
+                    size={48}
+                    className=""></IconClick>
+            </div>
+            <ul>
+                {data.map(v =>
+                    <TextCard item={v} key={crypto.randomUUID()} handleUse={handleUse} handleDel={handleDel}></TextCard>
+                )}
+            </ul>
+        </div>
+    ); else return (<></>);
+}