...

messages/en-US.json

@@ -242,6 +242,15 @@
     "username": "Username",
     "displayName": "Display Name",
     "notSet": "Not Set",
-    "memberSince": "Member Since"
+    "memberSince": "Member Since",
+    "folders": {
+      "title": "Folders",
+      "noFolders": "No folders yet",
+      "folderName": "Folder Name",
+      "totalPairs": "Total Pairs",
+      "createdAt": "Created At",
+      "actions": "Actions",
+      "view": "View"
+    }
   }
 }

messages/zh-CN.json

@@ -242,6 +242,15 @@
     "username": "用户名",
     "displayName": "显示名称",
     "notSet": "未设置",
-    "memberSince": "注册时间"
+    "memberSince": "注册时间",
+    "folders": {
+      "title": "文件夹",
+      "noFolders": "还没有文件夹",
+      "folderName": "文件夹名称",
+      "totalPairs": "文本对数量",
+      "createdAt": "创建时间",
+      "actions": "操作",
+      "view": "查看"
+    }
   }
 }

src/app/users/[username]/page.tsx

@@ -1,6 +1,8 @@
 import Image from "next/image";
+import Link from "next/link";
 import { Container } from "@/components/ui/Container";
 import { actionGetUserProfileByUsername } from "@/modules/auth/auth-action";
+import { repoGetFoldersWithTotalPairsByUserId } from "@/modules/folder/folder-repository";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { auth } from "@/auth";
@@ -27,6 +29,9 @@ export default async function UserPage({ params }: UserPageProps) {
 
     const user = result.data;
 
+    // Get user's folders
+    const folders = await repoGetFoldersWithTotalPairsByUserId(user.id);
+
     // Check if viewing own profile
     const isOwnProfile = session?.user?.username === username || session?.user?.email === username;
 
@@ -106,7 +111,7 @@ export default async function UserPage({ params }: UserPageProps) {
                 </div>
 
                 {/* Account Info */}
-                <div className="bg-white rounded-lg shadow-md p-6">
+                <div className="bg-white rounded-lg shadow-md p-6 mb-6">
                     <h2 className="text-xl font-semibold text-gray-800 mb-4">{t("accountInfo")}</h2>
                     <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                         <div>
@@ -133,6 +138,59 @@ export default async function UserPage({ params }: UserPageProps) {
                         </div>
                     </dl>
                 </div>
+
+                {/* Folders Section */}
+                <div className="bg-white rounded-lg shadow-md p-6">
+                    <h2 className="text-xl font-semibold text-gray-800 mb-4">{t("folders.title")}</h2>
+                    {folders.length === 0 ? (
+                        <p className="text-gray-500 text-center py-8">{t("folders.noFolders")}</p>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="min-w-full divide-y divide-gray-200">
+                                <thead className="bg-gray-50">
+                                    <tr>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            {t("folders.folderName")}
+                                        </th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            {t("folders.totalPairs")}
+                                        </th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            {t("folders.createdAt")}
+                                        </th>
+                                        <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            {t("folders.actions")}
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody className="bg-white divide-y divide-gray-200">
+                                    {folders.map((folder) => (
+                                        <tr key={folder.id} className="hover:bg-gray-50">
+                                            <td className="px-6 py-4 whitespace-nowrap">
+                                                <div className="text-sm font-medium text-gray-900">{folder.name}</div>
+                                                <div className="text-sm text-gray-500">ID: {folder.id}</div>
+                                            </td>
+                                            <td className="px-6 py-4 whitespace-nowrap">
+                                                <div className="text-sm text-gray-900">{folder.total}</div>
+                                            </td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                                {new Date(folder.createdAt).toLocaleDateString()}
+                                            </td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                                <Link
+                                                    href={`/folders/${folder.id}`}
+                                                    className="text-[#35786f] hover:text-[#2a5f58]"
+                                                >
+                                                    {t("folders.view")}
+                                                </Link>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
             </Container>
         </div>
     );

src/modules/folder/folder-repository.ts

@@ -87,12 +87,16 @@ export async function repoGetFoldersWithTotalPairsByUserId(userId: string) {
         select: { pairs: true },
       },
     },
+    orderBy: {
+      createdAt: 'desc',
+    },
   });
   return folders.map(folder => ({
     id: folder.id,
     name: folder.name,
     userId: folder.userId,
     total: folder._count?.pairs ?? 0,
+    createdAt: folder.createdAt,
   }));
 }