feat(explore): 添加文件夹详情页面

- 修复 folder-aciton.ts 文件名拼写错误为 folder-action.ts
- 修复所有导入路径中的拼写错误
- 添加 repoGetPublicFolderById 和 actionGetPublicFolderById
- 创建 ExploreDetailClient 详情页组件
- /explore/[id] 现在显示文件夹详情和链接到 /folders/[id]
- 添加 exploreDetail 中英文翻译

messages/en-US.json

@@ -297,6 +297,20 @@
     "sortByFavorites": "Sort by favorites",
     "sortByFavoritesActive": "Undo sort by favorites"
   },
+  "exploreDetail": {
+    "title": "Folder Details",
+    "createdBy": "Created by: {name}",
+    "unknownUser": "Unknown User",
+    "totalPairs": "Total Pairs",
+    "favorites": "Favorites",
+    "createdAt": "Created At",
+    "viewContent": "View Content",
+    "favorite": "Favorite",
+    "unfavorite": "Unfavorite",
+    "favorited": "Favorited",
+    "unfavorited": "Unfavorited",
+    "pleaseLogin": "Please login first"
+  },
   "favorites": {
     "title": "My Favorites",
     "subtitle": "Folders you've favorited",

messages/zh-CN.json

@@ -297,6 +297,20 @@
     "sortByFavorites": "按收藏数排序",
     "sortByFavoritesActive": "取消按收藏数排序"
   },
+  "exploreDetail": {
+    "title": "文件夹详情",
+    "createdBy": "创建者：{name}",
+    "unknownUser": "未知用户",
+    "totalPairs": "词对数量",
+    "favorites": "收藏数",
+    "createdAt": "创建时间",
+    "viewContent": "查看内容",
+    "favorite": "收藏",
+    "unfavorite": "取消收藏",
+    "favorited": "已收藏",
+    "unfavorited": "已取消收藏",
+    "pleaseLogin": "请先登录"
+  },
   "favorites": {
     "title": "我的收藏",
     "subtitle": "收藏的公开文件夹",

src/app/(features)/dictionary/DictionaryClient.tsx

@@ -11,7 +11,7 @@ import { Plus, RefreshCw } from "lucide-react";
 import { DictionaryEntry } from "./DictionaryEntry";
 import { LanguageSelector } from "./LanguageSelector";
 import { authClient } from "@/lib/auth-client";
-import { actionGetFoldersByUserId, actionCreatePair } from "@/modules/folder/folder-aciton";
+import { actionGetFoldersByUserId, actionCreatePair } from "@/modules/folder/folder-action";
 import { TSharedFolder } from "@/shared/folder-type";
 import { toast } from "sonner";
 

src/app/(features)/dictionary/page.tsx

@@ -1,7 +1,7 @@
 import { DictionaryClient } from "./DictionaryClient";
 import { auth } from "@/auth";
 import { headers } from "next/headers";
-import { actionGetFoldersByUserId } from "@/modules/folder/folder-aciton";
+import { actionGetFoldersByUserId } from "@/modules/folder/folder-action";
 import { TSharedFolder } from "@/shared/folder-type";
 
 export default async function DictionaryPage() {

src/app/(features)/explore/ExploreClient.tsx

@@ -17,7 +17,7 @@ import {
   actionSearchPublicFolders,
   actionToggleFavorite,
   actionCheckFavorite,
-} from "@/modules/folder/folder-aciton";
+} from "@/modules/folder/folder-action";
 import { TPublicFolder } from "@/shared/folder-type";
 import { authClient } from "@/lib/auth-client";
 

src/app/(features)/explore/[id]/ExploreDetailClient.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { Folder as Fd, Heart, ExternalLink, ArrowLeft } from "lucide-react";
+import { CircleButton } from "@/design-system/base/button";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import Link from "next/link";
+import {
+  actionToggleFavorite,
+  actionCheckFavorite,
+} from "@/modules/folder/folder-action";
+import { ActionOutputPublicFolder } from "@/modules/folder/folder-action-dto";
+import { authClient } from "@/lib/auth-client";
+
+interface ExploreDetailClientProps {
+  folder: ActionOutputPublicFolder;
+}
+
+export function ExploreDetailClient({ folder }: ExploreDetailClientProps) {
+  const router = useRouter();
+  const t = useTranslations("exploreDetail");
+  const [isFavorited, setIsFavorited] = useState(false);
+  const [favoriteCount, setFavoriteCount] = useState(folder.favoriteCount);
+
+  const { data: session } = authClient.useSession();
+  const currentUserId = session?.user?.id;
+
+  useEffect(() => {
+    if (currentUserId) {
+      actionCheckFavorite(folder.id).then((result) => {
+        if (result.success && result.data) {
+          setIsFavorited(result.data.isFavorited);
+          setFavoriteCount(result.data.favoriteCount);
+        }
+      });
+    }
+  }, [folder.id, currentUserId]);
+
+  const handleToggleFavorite = async () => {
+    if (!currentUserId) {
+      toast.error(t("pleaseLogin"));
+      return;
+    }
+    const result = await actionToggleFavorite(folder.id);
+    if (result.success && result.data) {
+      setIsFavorited(result.data.isFavorited);
+      setFavoriteCount(result.data.favoriteCount);
+      toast.success(
+        result.data.isFavorited ? t("favorited") : t("unfavorited")
+      );
+    } else {
+      toast.error(result.message);
+    }
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("zh-CN", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }).format(new Date(date));
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-3xl mx-auto px-4 py-6 sm:py-8">
+        <div className="flex items-center gap-3 mb-6">
+          <CircleButton onClick={() => router.push("/explore")}>
+            <ArrowLeft size={18} />
+          </CircleButton>
+          <h1 className="text-lg sm:text-xl font-semibold text-gray-900">
+            {t("title")}
+          </h1>
+        </div>
+
+        <div className="bg-white border border-gray-200 rounded-xl p-5 sm:p-8 shadow-sm">
+          <div className="flex items-start justify-between mb-6">
+            <div className="flex items-center gap-4">
+              <div className="w-14 h-14 sm:w-16 sm:h-16 rounded-xl bg-primary-50 flex items-center justify-center text-primary-500">
+                <Fd size={28} className="sm:w-8 sm:h-8" />
+              </div>
+              <div>
+                <h2 className="text-xl sm:text-2xl font-bold text-gray-900">
+                  {folder.name}
+                </h2>
+                <p className="text-sm text-gray-500 mt-1">
+                  {t("createdBy", {
+                    name: folder.userName ?? folder.userUsername ?? t("unknownUser"),
+                  })}
+                </p>
+              </div>
+            </div>
+            <CircleButton
+              onClick={handleToggleFavorite}
+              title={isFavorited ? t("unfavorite") : t("favorite")}
+              className="shrink-0"
+            >
+              <Heart
+                size={20}
+                className={isFavorited ? "fill-red-500 text-red-500" : ""}
+              />
+            </CircleButton>
+          </div>
+
+          <div className="grid grid-cols-3 gap-4 mb-6 py-4 border-y border-gray-100">
+            <div className="text-center">
+              <div className="text-2xl sm:text-3xl font-bold text-primary-600">
+                {folder.totalPairs}
+              </div>
+              <div className="text-xs sm:text-sm text-gray-500 mt-1">
+                {t("totalPairs")}
+              </div>
+            </div>
+            <div className="text-center border-x border-gray-100">
+              <div className="text-2xl sm:text-3xl font-bold text-red-500 flex items-center justify-center gap-1">
+                <Heart size={18} className={isFavorited ? "fill-red-500" : ""} />
+                {favoriteCount}
+              </div>
+              <div className="text-xs sm:text-sm text-gray-500 mt-1">
+                {t("favorites")}
+              </div>
+            </div>
+            <div className="text-center">
+              <div className="text-lg sm:text-xl font-semibold text-gray-700">
+                {formatDate(folder.createdAt)}
+              </div>
+              <div className="text-xs sm:text-sm text-gray-500 mt-1">
+                {t("createdAt")}
+              </div>
+            </div>
+          </div>
+
+          <Link
+            href={`/folders/${folder.id}`}
+            className="flex items-center justify-center gap-2 w-full py-3 px-4 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium transition-colors"
+          >
+            <ExternalLink size={18} />
+            {t("viewContent")}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(features)/explore/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
-import { InFolder } from "@/app/folders/[folder_id]/InFolder";
+import { ExploreDetailClient } from "./ExploreDetailClient";
-import { actionGetFolderVisibility } from "@/modules/folder/folder-aciton";
+import { actionGetPublicFolderById } from "@/modules/folder/folder-action";
 
 export default async function ExploreFolderPage({
   params,
@@ -13,17 +13,11 @@ export default async function ExploreFolderPage({
     redirect("/explore");
   }
 
-  const folderInfo = (await actionGetFolderVisibility(Number(id))).data;
+  const result = await actionGetPublicFolderById(Number(id));
 
-  if (!folderInfo) {
+  if (!result.success || !result.data) {
     redirect("/explore");
   }
 
-  const isPublic = folderInfo.visibility === "PUBLIC";
+  return <ExploreDetailClient folder={result.data} />;
-
-  if (!isPublic) {
-    redirect("/explore");
-  }
-
-  return <InFolder folderId={Number(id)} isReadOnly={true} />;
 }

src/app/(features)/explore/page.tsx

@@ -1,5 +1,5 @@
 import { ExploreClient } from "./ExploreClient";
-import { actionGetPublicFolders } from "@/modules/folder/folder-aciton";
+import { actionGetPublicFolders } from "@/modules/folder/folder-action";
 
 export default async function ExplorePage() {
   const publicFoldersResult = await actionGetPublicFolders();

src/app/(features)/favorites/FavoritesClient.tsx

@@ -12,7 +12,7 @@ import { toast } from "sonner";
 import { PageLayout } from "@/components/ui/PageLayout";
 import { PageHeader } from "@/components/ui/PageHeader";
 import { CardList } from "@/components/ui/CardList";
-import { actionGetUserFavorites, actionToggleFavorite } from "@/modules/folder/folder-aciton";
+import { actionGetUserFavorites, actionToggleFavorite } from "@/modules/folder/folder-action";
 
 type UserFavorite = {
   id: number;

src/app/(features)/memorize/page.tsx

@@ -5,7 +5,7 @@ import { FolderSelector } from "./FolderSelector";
 import { Memorize } from "./Memorize";
 import { auth } from "@/auth";
 import { headers } from "next/headers";
-import { actionGetFoldersWithTotalPairsByUserId, actionGetPairsByFolderId } from "@/modules/folder/folder-aciton";
+import { actionGetFoldersWithTotalPairsByUserId, actionGetPairsByFolderId } from "@/modules/folder/folder-action";
 
 export default async function MemorizePage({
   searchParams,

src/app/folders/FoldersClient.tsx

@@ -23,7 +23,7 @@ import {
   actionGetFoldersWithTotalPairsByUserId,
   actionRenameFolderById,
   actionSetFolderVisibility,
-} from "@/modules/folder/folder-aciton";
+} from "@/modules/folder/folder-action";
 import { TSharedFolderWithTotalPairs } from "@/shared/folder-type";
 
 interface FolderCardProps {

src/app/folders/[folder_id]/InFolder.tsx

@@ -9,7 +9,7 @@ import { useTranslations } from "next-intl";
 import { PageLayout } from "@/components/ui/PageLayout";
 import { PrimaryButton, CircleButton, LinkButton } from "@/design-system/base/button";
 import { CardList } from "@/components/ui/CardList";
-import { actionCreatePair, actionDeletePairById, actionGetPairsByFolderId } from "@/modules/folder/folder-aciton";
+import { actionCreatePair, actionDeletePairById, actionGetPairsByFolderId } from "@/modules/folder/folder-action";
 import { TSharedPair } from "@/shared/folder-type";
 import { toast } from "sonner";
 

src/app/folders/[folder_id]/TextPairCard.tsx

@@ -4,7 +4,7 @@ import { CircleButton } from "@/design-system/base/button";
 import { UpdateTextPairModal } from "./UpdateTextPairModal";
 import { useTranslations } from "next-intl";
 import { TSharedPair } from "@/shared/folder-type";
-import { actionUpdatePairById } from "@/modules/folder/folder-aciton";
+import { actionUpdatePairById } from "@/modules/folder/folder-action";
 import { ActionInputUpdatePairById } from "@/modules/folder/folder-action-dto";
 import { toast } from "sonner";
 

src/app/folders/[folder_id]/page.tsx

@@ -3,7 +3,7 @@ import { getTranslations } from "next-intl/server";
 import { InFolder } from "./InFolder";
 import { auth } from "@/auth";
 import { headers } from "next/headers";
-import { actionGetFolderVisibility } from "@/modules/folder/folder-aciton";
+import { actionGetFolderVisibility } from "@/modules/folder/folder-action";
 
 export default async function FoldersPage({
   params,

src/modules/folder/folder-action-dto.ts

@@ -62,6 +62,12 @@ export type ActionOutputGetPublicFolders = {
     data?: ActionOutputPublicFolder[];
 };
 
+export type ActionOutputGetPublicFolderById = {
+    message: string;
+    success: boolean;
+    data?: ActionOutputPublicFolder;
+};
+
 export type ActionOutputSetFolderVisibility = {
     message: string;
     success: boolean;

src/modules/folder/folder-action.ts

@@ -11,6 +11,7 @@ import {
   ActionInputUpdatePairById,
   ActionOutputGetFoldersWithTotalPairsByUserId,
   ActionOutputGetPublicFolders,
+  ActionOutputGetPublicFolderById,
   ActionOutputSetFolderVisibility,
   ActionOutputToggleFavorite,
   ActionOutputCheckFavorite,
@@ -30,6 +31,7 @@ import {
   repoGetFoldersWithTotalPairsByUserId,
   repoGetPairsByFolderId,
   repoGetPublicFolders,
+  repoGetPublicFolderById,
   repoGetUserIdByFolderId,
   repoRenameFolderById,
   repoSearchPublicFolders,
@@ -383,6 +385,32 @@ export async function actionSearchPublicFolders(query: string): Promise<ActionOu
     }
 }
 
+export async function actionGetPublicFolderById(folderId: number): Promise<ActionOutputGetPublicFolderById> {
+    try {
+        const folder = await repoGetPublicFolderById(folderId);
+        if (!folder) {
+            return {
+                success: false,
+                message: 'Folder not found.',
+            };
+        }
+        return {
+            success: true,
+            message: 'success',
+            data: {
+                ...folder,
+                visibility: folder.visibility as "PRIVATE" | "PUBLIC",
+            },
+        };
+    } catch (e) {
+        log.error("Operation failed", { error: e });
+        return {
+            success: false,
+            message: 'Unknown error occured.',
+        };
+    }
+}
+
 export async function actionToggleFavorite(
     folderId: number,
 ): Promise<ActionOutputToggleFavorite> {

src/modules/folder/folder-repository.ts

@@ -171,6 +171,32 @@ export async function repoGetFolderVisibility(
   return folder;
 }
 
+export async function repoGetPublicFolderById(
+  folderId: number,
+): Promise<RepoOutputPublicFolder | null> {
+  const folder = await prisma.folder.findUnique({
+    where: { id: folderId, visibility: Visibility.PUBLIC },
+    include: {
+      _count: { select: { pairs: true, favorites: true } },
+      user: { select: { name: true, username: true } },
+    },
+  });
+
+  if (!folder) return null;
+
+  return {
+    id: folder.id,
+    name: folder.name,
+    visibility: folder.visibility,
+    createdAt: folder.createdAt,
+    userId: folder.userId,
+    userName: folder.user?.name ?? "Unknown",
+    userUsername: folder.user?.username ?? "unknown",
+    totalPairs: folder._count.pairs,
+    favoriteCount: folder._count.favorites,
+  };
+}
+
 export async function repoGetPublicFolders(
   input: RepoInputGetPublicFolders = {},
 ): Promise<RepoOutputPublicFolder[]> {