...

2026-01-22 16:01:07 +08:00
parent d4d5a53747
commit fa6301538b
14 changed files with 99 additions and 620 deletions
--- a/src/app/(features)/memorize/FolderSelector.tsx
+++ b/src/app/(features)/memorize/FolderSelector.tsx
@@ -3,11 +3,11 @@
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
-import { Folder } from "../../../../generated/prisma/browser";
 import { Folder as Fd } from "lucide-react";
+import { TSharedFolderWithTotalPairs } from "@/shared/folder-type";

 interface FolderSelectorProps {
-  folders: (Folder & { total: number })[];
+  folders: TSharedFolderWithTotalPairs[];
 }

 const FolderSelector: React.FC<FolderSelectorProps> = ({ folders }) => {
@@ -50,7 +50,7 @@ const FolderSelector: React.FC<FolderSelectorProps> = ({ folders }) => {
                      className="flex flex-row items-center p-4 gap-3 hover:cursor-pointer hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0"
                    >
                      {/* 文件夹图标 */}
-                      <div className="flex-shrink-0">
+                      <div className="shrink-0">
                        <Fd className="text-gray-600" size={24} />
                      </div>
                      {/* 文件夹信息 */}
--- a/src/app/(features)/memorize/Memorize.tsx
+++ b/src/app/(features)/memorize/Memorize.tsx
@@ -6,14 +6,14 @@ import { getTTSUrl, TTS_SUPPORTED_LANGUAGES } from "@/lib/bigmodel/tts";
 import { useTranslations } from "next-intl";
 import localFont from "next/font/local";
 import { isNonNegativeInteger, SeededRandom } from "@/utils/random";
-import { Pair } from "../../../../generated/prisma/browser";
+import { TSharedPair } from "@/shared/folder-type";

 const myFont = localFont({
  src: "../../../../public/fonts/NotoNaskhArabic-VariableFont_wght.ttf",
 });

 interface MemorizeProps {
-  textPairs: Pair[];
+  textPairs: TSharedPair[];
 }

 const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
@@ -176,31 +176,28 @@ const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
            </button>
            <button
              onClick={toggleReverse}
-              className={`px-4 py-2 rounded-full transition-colors text-sm ${
-                reverse
-                  ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
-                  : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-              }`}
+              className={`px-4 py-2 rounded-full transition-colors text-sm ${reverse
+                ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
+                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                }`}
            >
              {t("reverse")}
            </button>
            <button
              onClick={toggleDictation}
-              className={`px-4 py-2 rounded-full transition-colors text-sm ${
-                dictation
-                  ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
-                  : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-              }`}
+              className={`px-4 py-2 rounded-full transition-colors text-sm ${dictation
+                ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
+                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                }`}
            >
              {t("dictation")}
            </button>
            <button
              onClick={toggleDisorder}
-              className={`px-4 py-2 rounded-full transition-colors text-sm ${
-                disorder
-                  ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
-                  : "bg-gray-200 text-gray-700 hover:bg-gray-300"
-              }`}
+              className={`px-4 py-2 rounded-full transition-colors text-sm ${disorder
+                ? "bg-[#35786f] text-white hover:bg-[#2d5f58]"
+                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                }`}
            >
              {t("disorder")}
            </button>
--- a/src/app/(features)/memorize/page.tsx
+++ b/src/app/(features)/memorize/page.tsx
@@ -1,14 +1,11 @@
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
-import {
-  getFoldersWithTotalPairsByUserId,
-} from "@/lib/server/services/folderService";
 import { isNonNegativeInteger } from "@/utils/random";
 import FolderSelector from "./FolderSelector";
 import Memorize from "./Memorize";
-import { getPairsByFolderId } from "@/lib/server/services/pairService";
 import { auth } from "@/auth";
 import { headers } from "next/headers";
+import { actionGetFoldersWithTotalPairsByUserId, actionGetPairsByFolderId } from "@/modules/folder";

 export default async function MemorizePage({
  searchParams,
@@ -27,13 +24,14 @@ export default async function MemorizePage({

  if (!folder_id) {
    const session = await auth.api.getSession({ headers: await headers() });
-    if(!session) redirect("/auth?redirect=/memorize")
+    if (!session) redirect("/auth?redirect=/memorize");
+
    return (
      <FolderSelector
-        folders={await getFoldersWithTotalPairsByUserId(session.user.id)}
+        folders={(await actionGetFoldersWithTotalPairsByUserId(session.user.id)).data!}
      />
    );
  }

-  return <Memorize textPairs={await getPairsByFolderId(folder_id)} />;
+  return <Memorize textPairs={(await actionGetPairsByFolderId(folder_id)).data!} />;
 }
--- a/src/app/(features)/translator/AddToFolder.tsx
+++ b/src/app/(features)/translator/AddToFolder.tsx
@@ -1,84 +0,0 @@
-"use client";
-
-import { LightButton } from "@/components/ui/buttons";
-import Container from "@/components/ui/Container";
-import { TranslationHistorySchema } from "@/lib/interfaces";
-import { Dispatch, useEffect, useState } from "react";
-import z from "zod";
-import { Folder } from "../../../../generated/prisma/browser";
-import { getFoldersByUserId } from "@/lib/server/services/folderService";
-import { Folder as Fd } from "lucide-react";
-import { createPair } from "@/lib/server/services/pairService";
-import { toast } from "sonner";
-import { useTranslations } from "next-intl";
-import { authClient } from "@/lib/auth-client";
-
-interface AddToFolderProps {
-  item: z.infer<typeof TranslationHistorySchema>;
-  setShow: Dispatch<React.SetStateAction<boolean>>;
-}
-
-const AddToFolder: React.FC<AddToFolderProps> = ({ item, setShow }) => {
-  const { data: session } = authClient.useSession();
-  const [folders, setFolders] = useState<Folder[]>([]);
-  const t = useTranslations("translator.add_to_folder");
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (!session) return;
-    const userId = session.user.id;
-    getFoldersByUserId(userId)
-      .then(setFolders)
-      .then(() => setLoading(false));
-  }, [session]);
-
-
-  if (!session) {
-    return (
-      <div className="fixed left-0 top-0 z-50 w-screen h-screen bg-black/50 flex justify-center items-center">
-        <Container className="p-6">
-          <div>{t("notAuthenticated")}</div>
-        </Container>
-      </div>
-    );
-  }
-  return (
-    <div className="fixed left-0 top-0 z-50 w-screen h-screen bg-black/50 flex justify-center items-center">
-      <Container className="p-6">
-        <h1>{t("chooseFolder")}</h1>
-        <div className="border border-gray-200 rounded-2xl">
-          {(loading && <span>...</span>) ||
-            (folders.length > 0 &&
-              folders.map((folder) => (
-                <button
-                  key={folder.id}
-                  className="p-2 flex items-center justify-start hover:bg-gray-50 gap-2 hover:cursor-pointer w-full border-b border-gray-200"
-                  onClick={() => {
-                    createPair({
-                      text1: item.text1,
-                      text2: item.text2,
-                      language1: item.language1,
-                      language2: item.language2,
-                      folderId: folder.id,
-                    })
-                      .then(() => {
-                        toast.success(t("success"));
-                        setShow(false);
-                      })
-                      .catch(() => {
-                        toast.error(t("error"));
-                      });
-                  }}
-                >
-                  <Fd />
-                  {t("folderInfo", { id: folder.id, name: folder.name })}
-                </button>
-              ))) || <div>{t("noFolders")}</div>}
-        </div>
-        <LightButton onClick={() => setShow(false)}>{t("close")}</LightButton>
-      </Container>
-    </div>
-  );
-};
-
-export default AddToFolder;
--- a/src/app/(features)/translator/FolderSelector.tsx
+++ b/src/app/(features)/translator/FolderSelector.tsx
@@ -1,57 +0,0 @@
-import Container from "@/components/ui/Container";
-import { useEffect, useState } from "react";
-import { Folder } from "../../../../generated/prisma/browser";
-import { getFoldersByUserId } from "@/lib/server/services/folderService";
-import { LightButton } from "@/components/ui/buttons";
-import { Folder as Fd } from "lucide-react";
-
-interface FolderSelectorProps {
-  setSelectedFolderId: (id: number) => void;
-  userId: string;
-  cancel: () => void;
-}
-
-const FolderSelector: React.FC<FolderSelectorProps> = ({
-  setSelectedFolderId,
-  userId,
-  cancel,
-}) => {
-  const [loading, setLoading] = useState(false);
-  const [folders, setFolders] = useState<Folder[]>([]);
-
-  useEffect(() => {
-    getFoldersByUserId(userId)
-      .then(setFolders)
-      .then(() => setLoading(false));
-  }, [userId]);
-
-  return (
-    <div
-      className={`bg-black/50 fixed inset-0 z-50 flex justify-center items-center`}
-    >
-      <Container className="p-6">
-        {(loading && <p>Loading...</p>) ||
-          (folders.length > 0 && (
-            <>
-              <h1>Select a Folder</h1>
-              <div className="m-2 border-gray-200 border rounded-2xl max-h-96 overflow-y-auto">
-                {folders.map((folder) => (
-                  <button
-                    className="p-2 w-full flex hover:bg-gray-50 gap-2"
-                    key={folder.id}
-                    onClick={() => setSelectedFolderId(folder.id)}
-                  >
-                    <Fd />
-                    {folder.id}. {folder.name}
-                  </button>
-                ))}
-              </div>
-            </>
-          )) || <p>No folders found</p>}
-        <LightButton onClick={cancel}>Cancel</LightButton>
-      </Container>
-    </div>
-  );
-};
-
-export default FolderSelector;
--- a/src/app/(features)/translator/page.tsx
+++ b/src/app/(features)/translator/page.tsx
@@ -4,22 +4,12 @@ import { LightButton } from "@/components/ui/buttons";
 import { IconClick } from "@/components/ui/buttons";
 import IMAGES from "@/config/images";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { TranslationHistorySchema } from "@/lib/interfaces";
-import { tlsoPush, tlso } from "@/lib/browser/localStorageOperators";
-import { logger } from "@/lib/logger";
-import { Plus, Trash } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRef, useState } from "react";
-import z from "zod";
-import AddToFolder from "./AddToFolder";
-import { translateText } from "@/modules/translator/translator-action";
-import type { TranslateTextOutput } from "@/lib/server/services/types";
+import { translateText } from "@/modules/translator";
 import { toast } from "sonner";
-import FolderSelector from "./FolderSelector";
-import { createPair } from "@/lib/server/services/pairService";
-import { shallowEqual } from "@/utils/random";
-import { authClient } from "@/lib/auth-client";
 import { getTTSUrl, TTS_SUPPORTED_LANGUAGES } from "@/lib/bigmodel/tts";
+import { TranslateTextOutput } from "@/modules/translator";

 export default function TranslatorPage() {
  const t = useTranslations("translator");
@@ -34,18 +24,10 @@ export default function TranslatorPage() {
    targetLanguage: string;
  } | null>(null);
  const { load, play } = useAudioPlayer();
-  const [history, setHistory] = useState<z.infer<typeof TranslationHistorySchema>[]>(() => tlso.get());
-  const [showAddToFolder, setShowAddToFolder] = useState(false);
-  const [addToFolderItem, setAddToFolderItem] = useState<z.infer<
-    typeof TranslationHistorySchema
-  > | null>(null);
  const lastTTS = useRef({
    text: "",
    url: "",
  });
-  const [autoSave, setAutoSave] = useState(false);
-  const [autoSaveFolderId, setAutoSaveFolderId] = useState<number | null>(null);
-  const { data: session } = authClient.useSession();

  const tts = async (text: string, locale: string) => {
    if (lastTTS.current.text !== text) {
@@ -65,14 +47,13 @@ export default function TranslatorPage() {

        const url = await getTTSUrl(text, theLanguage as TTS_SUPPORTED_LANGUAGES);
        await load(url);
+        await play();
        lastTTS.current.text = text;
        lastTTS.current.url = url;
      } catch (error) {
        toast.error("Failed to generate audio");
-        logger.error("生成音频失败", error);
      }
    }
-    await play();
  };

  const translate = async () => {
@@ -94,7 +75,6 @@ export default function TranslatorPage() {
        targetLanguage,
        forceRetranslate,
        needIpa,
-        userId: session?.user?.id,
      });

      setTranslationResult(result);
@@ -102,34 +82,6 @@ export default function TranslatorPage() {
        sourceText,
        targetLanguage,
      });
-
-      // 更新本地历史记录
-      const historyItem = {
-        text1: result.sourceText,
-        text2: result.translatedText,
-        language1: result.sourceLanguage,
-        language2: result.targetLanguage,
-      };
-      setHistory(tlsoPush(historyItem));
-
-      // 自动保存到文件夹
-      if (autoSave && autoSaveFolderId) {
-        createPair({
-          text1: result.sourceText,
-          text2: result.translatedText,
-          language1: result.sourceLanguage,
-          language2: result.targetLanguage,
-          ipa1: result.sourceIpa || undefined,
-          ipa2: result.targetIpa || undefined,
-          folderId: autoSaveFolderId,
-        })
-          .then(() => {
-            toast.success(`${sourceText} 保存到文件夹 ${autoSaveFolderId} 成功`);
-          })
-          .catch((error) => {
-            toast.error(`保存失败: ${error.message}`);
-          });
-      }
    } catch (error) {
      toast.error("翻译失败，请重试");
      console.error("翻译错误:", error);
@@ -261,84 +213,6 @@ export default function TranslatorPage() {
          {t("translate")}
        </button>
      </div>
-
-      {/* AutoSave Component */}
-      <div className="w-screen flex justify-center items-center">
-        <label className="flex items-center">
-          <input
-            type="checkbox"
-            checked={autoSave}
-            onChange={(e) => {
-              const checked = e.target.checked;
-              if (checked === true && !session) {
-                toast.warning("Please login to enable auto-save");
-                return;
-              }
-              if (checked === false) setAutoSaveFolderId(null);
-              setAutoSave(checked);
-            }}
-            className="mr-2"
-          />
-          {t("autoSave")}
-          {autoSaveFolderId ? ` (${autoSaveFolderId})` : ""}
-        </label>
-      </div>
-
-      {history.length > 0 && (
-        <div className="m-6 flex flex-col items-center">
-          <h1 className="text-2xl font-light">{t("history")}</h1>
-          <div className="border border-gray-200 rounded-2xl m-4">
-            {history.toReversed().map((item, index) => (
-              <div
-                key={index}
-                className="border-b border-gray-200 p-2 group hover:bg-gray-50 flex gap-2 flex-row justify-between items-start"
-              >
-                <div className="flex-1 flex flex-col">
-                  <p className="text-sm font-light">{item.text1}</p>
-                  <p className="text-sm font-light">{item.text2}</p>
-                </div>
-                <div className="flex gap-2">
-                  <button
-                    onClick={() => {
-                      if (!session?.user) {
-                        toast.info("请先登录后再保存到文件夹");
-                        return;
-                      }
-                      setShowAddToFolder(true);
-                      setAddToFolderItem(item);
-                    }}
-                    className="hover:bg-gray-200 hover:cursor-pointer rounded-4xl border border-gray-200 w-8 h-8 flex justify-center items-center"
-                  >
-                    <Plus />
-                  </button>
-                  <button
-                    onClick={() => {
-                      setHistory(
-                        tlso.set(
-                          tlso.get().filter((v) => !shallowEqual(v, item)),
-                        ) || [],
-                      );
-                    }}
-                    className="hover:bg-gray-200 hover:cursor-pointer rounded-4xl border border-gray-200 w-8 h-8 flex justify-center items-center"
-                  >
-                    <Trash />
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-          {showAddToFolder && (
-            <AddToFolder setShow={setShowAddToFolder} item={addToFolderItem!} />
-          )}
-          {autoSave && !autoSaveFolderId && (
-            <FolderSelector
-              userId={session!.user.id as string}
-              cancel={() => setAutoSave(false)}
-              setSelectedFolderId={(id) => setAutoSaveFolderId(id)}
-            />
-          )}
-        </div>
-      )}
    </>
  );
 }