diff --git a/__tests__/access-rules.test.ts b/__tests__/access-rules.test.ts
new file mode 100644
index 0000000..142521c
--- /dev/null
+++ b/__tests__/access-rules.test.ts
@@ -0,0 +1,120 @@
+import {
+  type Viewer,
+  type Visibility,
+  canTouchFileSet,
+  canUploadToCategory,
+  canViewCategory,
+  categoryWhereFor,
+  fileSetWhereFor,
+} from '@/lib/access-rules';
+import { describe, expect, it } from 'vitest';
+
+const VISIBILITIES: Visibility[] = ['private', 'internal', 'public'];
+
+const admin: NonNullable<Viewer> = { id: 1, role: 'admin' };
+const member: NonNullable<Viewer> = { id: 2, role: 'member' };
+const otherMember: NonNullable<Viewer> = { id: 3, role: 'member' };
+const anon: Viewer = null;
+
+describe('categoryWhereFor（相册列表的服务端过滤条件）', () => {
+  it('匿名只能看到 public', () => {
+    expect(categoryWhereFor(anon)).toEqual({ visibility: 'public' });
+  });
+
+  it('管理员无过滤', () => {
+    expect(categoryWhereFor(admin)).toEqual({});
+  });
+
+  it('成员看到 internal 与 public，永远不含 private', () => {
+    const where = categoryWhereFor(member) as { visibility: { in: Visibility[] } };
+    expect(where.visibility.in).toEqual(['internal', 'public']);
+    expect(where.visibility.in).not.toContain('private');
+  });
+});
+
+describe('canViewCategory 裁决矩阵', () => {
+  const expected: Record<string, Record<Visibility, string>> = {
+    admin: { private: 'allow', internal: 'allow', public: 'allow' },
+    member: { private: 'not-found', internal: 'allow', public: 'allow' },
+    anon: { private: 'not-found', internal: 'login', public: 'allow' },
+  };
+
+  for (const [who, verdicts] of Object.entries(expected)) {
+    const viewer: Viewer = who === 'admin' ? admin : who === 'member' ? member : anon;
+    for (const visibility of VISIBILITIES) {
+      it(`${who} 访问 ${visibility} 相册 ⇒ ${verdicts[visibility]}`, () => {
+        expect(canViewCategory(viewer, { visibility })).toBe(verdicts[visibility]);
+      });
+    }
+  }
+
+  it('同一函数同时给出页面与 API 所需的两种信息：私有对被拒读者是 not-found 而非 login', () => {
+    expect(canViewCategory(anon, { visibility: 'private' })).toBe('not-found');
+    expect(canViewCategory(anon, { visibility: 'internal' })).toBe('login');
+  });
+});
+
+describe('canUploadToCategory', () => {
+  it('匿名不可上传任何相册', () => {
+    for (const visibility of VISIBILITIES) {
+      expect(canUploadToCategory(anon, { visibility })).toBe(false);
+    }
+  });
+
+  it('成员只能上传到 internal/public，私有相册仅管理员', () => {
+    expect(canUploadToCategory(member, { visibility: 'private' })).toBe(false);
+    expect(canUploadToCategory(member, { visibility: 'internal' })).toBe(true);
+    expect(canUploadToCategory(member, { visibility: 'public' })).toBe(true);
+  });
+
+  it('管理员可上传到任意相册', () => {
+    for (const visibility of VISIBILITIES) {
+      expect(canUploadToCategory(admin, { visibility })).toBe(true);
+    }
+  });
+});
+
+describe('fileSetWhereFor（文件集是 owner-relative，与相册不同）', () => {
+  it('管理员无过滤', () => {
+    expect(fileSetWhereFor(admin)).toEqual({});
+  });
+
+  it('成员的条件包含自己创建的集合，即使它是 private', () => {
+    expect(fileSetWhereFor(member)).toEqual({
+      OR: [{ visibility: 'internal' }, { visibility: 'public' }, { createdBy: 2 }],
+    });
+  });
+});
+
+describe('canTouchFileSet（读取与上传共用同一谓词）', () => {
+  const privateOwnedByMember = { visibility: 'private' as const, createdBy: member.id };
+  const privateOwnedByOther = { visibility: 'private' as const, createdBy: otherMember.id };
+
+  it('成员可以访问自己的私有文件集', () => {
+    expect(canTouchFileSet(member, privateOwnedByMember)).toBe(true);
+  });
+
+  it('成员不能访问他人的私有文件集', () => {
+    expect(canTouchFileSet(otherMember, privateOwnedByMember)).toBe(false);
+    expect(canTouchFileSet(member, privateOwnedByOther)).toBe(false);
+  });
+
+  it('internal/public 对任意登录成员开放', () => {
+    for (const visibility of ['internal', 'public'] as Visibility[]) {
+      expect(canTouchFileSet(member, { visibility, createdBy: otherMember.id })).toBe(true);
+      expect(canTouchFileSet(otherMember, { visibility, createdBy: member.id })).toBe(true);
+    }
+  });
+
+  it('管理员可访问任意文件集', () => {
+    for (const visibility of VISIBILITIES) {
+      expect(canTouchFileSet(admin, { visibility, createdBy: otherMember.id })).toBe(true);
+    }
+  });
+
+  it('谓词与列表过滤对"自己的私有集"结论一致', () => {
+    const where = fileSetWhereFor(member) as { OR: Array<Record<string, unknown>> };
+    expect(where.OR).toContainEqual({ createdBy: member.id });
+    expect(canTouchFileSet(member, privateOwnedByMember)).toBe(true);
+  });
+});
diff --git a/app/admin/_tab-content.tsx b/app/admin/_tab-content.tsx
new file mode 100644
index 0000000..62462e7
--- /dev/null
+++ b/app/admin/_tab-content.tsx
@@ -0,0 +1,194 @@
+import { AdminFileSets } from '@/components/admin-filesets';
+import { AdminCategoriesTab } from '@/components/admin/admin-categories-tab';
+import { AdminShareTab } from '@/components/admin/admin-share-tab';
+import { AdminUsersTab } from '@/components/admin/admin-users-tab';
+import type {
+  AdminTab,
+  CategoryItem,
+  FileSetItem,
+  ShareLinkItem,
+  UserItem,
+} from '@/components/admin/types';
+import { prisma } from '@/lib/db';
+import { type SearchParams, clampPage, readInt, readString } from '@/lib/params';
+
+const USER_PAGE_SIZES = [10, 20, 50] as const;
+const USER_PAGE_DEFAULT = 20;
+const SHARE_PAGE_SIZE = 20;
+
+type CategoryRow = {
+  id: number;
+  name: string;
+  description: string | null;
+  createdAt: Date;
+  visibility: 'private' | 'internal' | 'public';
+  _count: { photos: number };
+};
+
+type UserRow = {
+  id: number;
+  username: string;
+  role: 'admin' | 'member';
+  status: 'pending' | 'active' | 'rejected';
+  createdAt: Date;
+  _count: { photos: number };
+};
+
+type ShareLinkRow = {
+  id: number;
+  categoryId: number;
+  token: string;
+  expiresAt: Date | null;
+  createdAt: Date;
+  category: { name: string };
+};
+
+type FileSetRow = {
+  id: number;
+  name: string;
+  description: string | null;
+  visibility: 'private' | 'internal' | 'public';
+  createdAt: Date;
+  _count: { files: number };
+};
+
+function toUserItem(row: UserRow): UserItem {
+  return {
+    id: row.id,
+    username: row.username,
+    role: row.role,
+    status: row.status,
+    photoCount: row._count.photos,
+    createdAt: row.createdAt.toISOString(),
+  };
+}
+
+/**
+ * 只查询当前 tab 需要的数据。切换 tab 因此是一次往返，
+ * 换来的是文档负载从"四张无界表"降到"一张表的一页"。
+ */
+export async function AdminTabContent({
+  tab,
+  params,
+  shareBaseUrl,
+}: {
+  tab: AdminTab;
+  params: SearchParams;
+  shareBaseUrl: string;
+}) {
+  if (tab === 'categories') {
+    const rows = (await prisma.category.findMany({
+      orderBy: { createdAt: 'desc' },
+      include: { _count: { select: { photos: true } } },
+    })) as CategoryRow[];
+
+    const categories: CategoryItem[] = rows.map(row => ({
+      id: row.id,
+      name: row.name,
+      description: row.description,
+      photoCount: row._count.photos,
+      createdAt: row.createdAt.toISOString(),
+      visibility: row.visibility,
+    }));
+
+    return <AdminCategoriesTab categories={categories} />;
+  }
+
+  if (tab === 'filesets') {
+    const rows = (await prisma.fileSet.findMany({
+      orderBy: { createdAt: 'desc' },
+      include: { _count: { select: { files: true } } },
+    })) as FileSetRow[];
+
+    const fileSets: FileSetItem[] = rows.map(row => ({
+      id: row.id,
+      name: row.name,
+      description: row.description,
+      visibility: row.visibility,
+      fileCount: row._count.files,
+      createdAt: row.createdAt.toISOString(),
+    }));
+
+    return <AdminFileSets filesets={fileSets} />;
+  }
+
+  if (tab === 'users') {
+    const query = readString(params, 'q').trim();
+    const rawRole = readString(params, 'role');
+    const role = rawRole === 'admin' || rawRole === 'member' ? rawRole : null;
+    const requestedPageSize = readInt(params, 'pageSize');
+    const pageSize =
+      requestedPageSize && (USER_PAGE_SIZES as readonly number[]).includes(requestedPageSize)
+        ? requestedPageSize
+        : USER_PAGE_DEFAULT;
+
+    const where = {
+      status: 'active' as const,
+      ...(role ? { role } : {}),
+      ...(query ? { username: { contains: query } } : {}),
+    };
+
+    const total = (await prisma.user.count({ where })) as number;
+    const page = clampPage(readInt(params, 'p'), total, pageSize);
+
+    const [activeRows, pendingRows] = (await Promise.all([
+      prisma.user.findMany({
+        where,
+        orderBy: { createdAt: 'desc' },
+        skip: (page - 1) * pageSize,
+        take: pageSize,
+        include: { _count: { select: { photos: true } } },
+      }),
+      prisma.user.findMany({
+        where: { status: 'pending' },
+        orderBy: { createdAt: 'desc' },
+        include: { _count: { select: { photos: true } } },
+      }),
+    ])) as [UserRow[], UserRow[]];
+
+    return (
+      <AdminUsersTab
+        users={activeRows.map(toUserItem)}
+        pendingUsers={pendingRows.map(toUserItem)}
+        total={total}
+        page={page}
+        pageSize={pageSize}
+        query={query}
+        role={role ?? ''}
+      />
+    );
+  }
+
+  const total = (await prisma.shareLink.count()) as number;
+  const page = clampPage(readInt(params, 'p'), total, SHARE_PAGE_SIZE);
+
+  const [rows, categoryRows] = (await Promise.all([
+    prisma.shareLink.findMany({
+      orderBy: { createdAt: 'desc' },
+      skip: (page - 1) * SHARE_PAGE_SIZE,
+      take: SHARE_PAGE_SIZE,
+      include: { category: { select: { name: true } } },
+    }),
+    prisma.category.findMany({ select: { id: true, name: true }, orderBy: { name: 'asc' } }),
+  ])) as [ShareLinkRow[], Array<{ id: number; name: string }>];
+
+  const shareLinks: ShareLinkItem[] = rows.map(row => ({
+    id: row.id,
+    token: row.token,
+    categoryId: row.categoryId,
+    categoryName: row.category.name,
+    expiresAt: row.expiresAt?.toISOString() ?? null,
+    createdAt: row.createdAt.toISOString(),
+  }));
+
+  return (
+    <AdminShareTab
+      shareLinks={shareLinks}
+      categories={categoryRows}
+      shareBaseUrl={shareBaseUrl}
+      total={total}
+      page={page}
+      pageSize={SHARE_PAGE_SIZE}
+    />
+  );
+}
diff --git a/app/admin/error.tsx b/app/admin/error.tsx
new file mode 100644
index 0000000..1c334cf
--- /dev/null
+++ b/app/admin/error.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { ErrorState } from '@/components/error-state';
+
+export default function AdminError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <ErrorState
+      title="控制台加载失败"
+      description="无法读取管理数据，请重试。"
+      detail={process.env.NODE_ENV === 'production' ? error?.digest : error?.message}
+      reset={reset}
+    />
+  );
+}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 6816259..8d0cb27 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,110 +1,49 @@
-import { AdminDashboard } from '@/components/admin-dashboard';
-import { auth } from '@/lib/auth';
-import { prisma } from '@/lib/db';
-import type { CategoryVisibility, FileSetVisibility, UserRole, UserStatus } from '@prisma/client';
-import { redirect } from 'next/navigation';
+import { AdminShell } from '@/components/admin/admin-shell';
+import { ADMIN_TABS, type AdminTab } from '@/components/admin/types';
+import { AdminTabSkeleton } from '@/components/skeletons/admin-tab-skeleton';
+import { requireAdminViewer } from '@/lib/access';
+import { type SearchParams, readEnum } from '@/lib/params';
+import { headers } from 'next/headers';
+import { Suspense } from 'react';
 
-type CategoryWithCount = {
-  id: number;
-  name: string;
-  description: string | null;
-  createdAt: Date;
-  visibility: CategoryVisibility;
-  _count: { photos: number };
-};
+import { AdminTabContent } from './_tab-content';
 
-type UserWithPhotoCount = {
-  id: number;
-  username: string;
-  role: UserRole;
-  status: UserStatus;
-  createdAt: Date;
-  _count: { photos: number };
-};
+async function requestOrigin(): Promise<string> {
+  const store = await headers();
+  const host = store.get('x-forwarded-host') ?? store.get('host');
+  if (host) {
+    const proto = store.get('x-forwarded-proto') ?? 'http';
+    return `${proto}://${host}`;
+  }
 
-type ShareLinkWithCategory = {
-  id: number;
-  categoryId: number;
-  token: string;
-  expiresAt: Date | null;
-  createdAt: Date;
-  category: { name: string };
-};
+  if (process.env.NEXTAUTH_URL) {
+    try {
+      return new URL(process.env.NEXTAUTH_URL).origin;
+    } catch {
+      // 配置值不是合法 URL，交给下面的相对路径兜底
+    }
+  }
 
-type FileSetWithCount = {
-  id: number;
-  name: string;
-  description: string | null;
-  visibility: FileSetVisibility;
-  createdAt: Date;
-  _count: { files: number };
-};
+  return '';
+}
 
-export default async function AdminPage() {
-  const session = await auth();
-  if (!session?.user || session.user.role !== 'admin') {
-    redirect('/login?callbackUrl=/admin');
-  }
+export default async function AdminPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
+  await requireAdminViewer('/admin');
 
-  const [categories, users, shareLinks, fileSets] = await Promise.all<
-    [CategoryWithCount[], UserWithPhotoCount[], ShareLinkWithCategory[], FileSetWithCount[]]
-  >([
-    prisma.category.findMany({
-      orderBy: { createdAt: 'desc' },
-      include: { _count: { select: { photos: true } } },
-    }),
-    prisma.user.findMany({
-      orderBy: { createdAt: 'desc' },
-      include: { _count: { select: { photos: true } } },
-    }),
-    prisma.shareLink.findMany({
-      orderBy: { createdAt: 'desc' },
-      include: {
-        category: {
-          select: { name: true },
-        },
-      },
-    }),
-    prisma.fileSet.findMany({
-      orderBy: { createdAt: 'desc' },
-      include: { _count: { select: { files: true } } },
-    }),
-  ]);
+  const params = await searchParams;
+  const tab = readEnum<AdminTab>(
+    params,
+    'tab',
+    ADMIN_TABS.map(item => item.value),
+    'categories'
+  );
+  const shareBaseUrl = `${await requestOrigin()}/share/`;
 
   return (
-    <AdminDashboard
-      categories={categories.map(category => ({
-        id: category.id,
-        name: category.name,
-        description: category.description,
-        photoCount: category._count.photos,
-        createdAt: category.createdAt.toISOString(),
-        visibility: category.visibility,
-      }))}
-      users={users.map(user => ({
-        id: user.id,
-        username: user.username,
-        role: user.role,
-        status: user.status,
-        photoCount: user._count.photos,
-        createdAt: user.createdAt.toISOString(),
-      }))}
-      shareLinks={shareLinks.map(link => ({
-        id: link.id,
-        token: link.token,
-        categoryId: link.categoryId,
-        categoryName: link.category.name,
-        expiresAt: link.expiresAt?.toISOString() ?? null,
-        createdAt: link.createdAt.toISOString(),
-      }))}
-      fileSets={fileSets.map(fs => ({
-        id: fs.id,
-        name: fs.name,
-        description: fs.description,
-        visibility: fs.visibility,
-        fileCount: fs._count.files,
-        createdAt: fs.createdAt.toISOString(),
-      }))}
-    />
+    <AdminShell tab={tab}>
+      <Suspense fallback={<AdminTabSkeleton />}>
+        <AdminTabContent tab={tab} params={params} shareBaseUrl={shareBaseUrl} />
+      </Suspense>
+    </AdminShell>
   );
 }
diff --git a/app/album/[id]/error.tsx b/app/album/[id]/error.tsx
new file mode 100644
index 0000000..5108808
--- /dev/null
+++ b/app/album/[id]/error.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { ErrorState } from '@/components/error-state';
+
+export default function AlbumError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <ErrorState
+      title="相册加载失败"
+      description="无法读取该相册的媒体列表，请重试。"
+      detail={process.env.NODE_ENV === 'production' ? error?.digest : error?.message}
+      reset={reset}
+    />
+  );
+}
diff --git a/app/album/[id]/page.tsx b/app/album/[id]/page.tsx
index 343efe1..835263f 100644
--- a/app/album/[id]/page.tsx
+++ b/app/album/[id]/page.tsx
@@ -1,35 +1,24 @@
-import { PhotoGrid } from '@/components/photo-grid';
+import { PHOTO_PAGE_SIZE, PhotoPage } from '@/components/photo-page';
 import { SearchTrigger } from '@/components/search-trigger';
+import { PhotoGridSkeleton } from '@/components/skeletons/photo-grid-skeleton';
 import { SortToggle } from '@/components/sort-toggle';
 import { UploadDialog } from '@/components/upload-dialog';
-import { auth } from '@/lib/auth';
+import { getViewer } from '@/lib/access';
+import { type Visibility, canViewCategory, categoryWhereFor } from '@/lib/access-rules';
 import { prisma } from '@/lib/db';
-import { getPublicObjectUrl, getPublicThumbnailUrl } from '@/lib/storage';
-import type { CategoryVisibility } from '@prisma/client';
+import { type SearchParams, clampPage, readInt, readSort } from '@/lib/params';
 import { format } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
 import { CalendarClock, CalendarDays, Image as ImageIcon, Images } from 'lucide-react';
 import { notFound, redirect } from 'next/navigation';
+import { Suspense } from 'react';
 
-type PhotoRecord = {
-  id: number;
-  filename: string;
-  originalName: string;
-  description: string | null;
-  categoryId: number;
-  uploaderId: number;
-  mediaType: 'image' | 'video';
-  createdAt: Date;
-  uploader: { username: string };
-};
-
-type CategoryWithPhotos = {
+type CategoryRow = {
   id: number;
   name: string;
   description: string | null;
-  visibility: CategoryVisibility;
+  visibility: Visibility;
   createdAt: Date;
-  photos: PhotoRecord[];
 };
 
 export default async function AlbumPage({
@@ -37,82 +26,58 @@ export default async function AlbumPage({
   searchParams,
 }: {
   params: Promise<{ id: string }>;
-  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
+  searchParams?: Promise<SearchParams>;
 }) {
   const { id } = await params;
   const q = (await searchParams) ?? {};
-  const sort = (typeof q['sort'] === 'string' ? q['sort'] : undefined) === 'asc' ? 'asc' : 'desc';
+  const sort = readSort(q);
   const categoryId = Number.parseInt(id, 10);
   if (!Number.isInteger(categoryId)) {
     notFound();
   }
 
-  const session = await auth();
+  const viewer = await getViewer();
 
+  // 这里只取相册本身：照片窗口交给下面的 <Suspense> 流式补齐，
+  // 否则页头会被最慢的那个大列表查询一起阻塞住。
   const category = (await prisma.category.findUnique({
     where: { id: categoryId },
-    include: {
-      photos: {
-        orderBy: { createdAt: sort },
-        include: {
-          uploader: { select: { username: true } },
-        },
-      },
-    },
-  })) as CategoryWithPhotos | null;
+    select: { id: true, name: true, description: true, visibility: true, createdAt: true },
+  })) as CategoryRow | null;
 
   if (!category) {
     notFound();
   }
 
-  const isAdmin = session?.user?.role === 'admin';
-  const isLoggedIn = Boolean(session?.user);
-
-  if (!isAdmin) {
-    if (category.visibility === 'private') {
-      notFound();
-    }
-    if (category.visibility === 'internal' && !isLoggedIn) {
-      redirect(`/login?callbackUrl=/album/${category.id}`);
-    }
+  const verdict = canViewCategory(viewer, category);
+  if (verdict === 'not-found') {
+    notFound();
   }
+  if (verdict === 'login') {
+    redirect(`/login?callbackUrl=${encodeURIComponent(`/album/${category.id}`)}`);
+  }
+
+  const stats = (await prisma.photo.aggregate({
+    where: { categoryId: category.id },
+    _count: { _all: true },
+    _max: { createdAt: true },
+  })) as { _count: { _all: number }; _max: { createdAt: Date | null } };
 
-  const viewerId = (() => {
-    if (!session?.user?.id) return null;
-    const parsed = Number.parseInt(session.user.id, 10);
-    return Number.isNaN(parsed) ? null : parsed;
-  })();
-  const canManageAll = Boolean(isAdmin);
-  const allowOwnActions = viewerId !== null;
+  const total = stats._count._all;
+  const page = clampPage(readInt(q, 'p'), total, PHOTO_PAGE_SIZE);
+  // ?photo= 一般只由客户端浅层写入，这里读一次是为了让深链指向的照片
+  // 即使不在当前页窗口里也能打开灯箱
+  const deepPhotoId = readInt(q, 'photo');
 
-  const uploadCategories = session?.user
+  const uploadCategories = viewer
     ? await prisma.category.findMany({
-        where: isAdmin
-          ? {}
-          : {
-              visibility: {
-                in: ['internal', 'public'] as CategoryVisibility[],
-              },
-            },
+        where: categoryWhereFor(viewer),
         select: { id: true, name: true },
         orderBy: { name: 'asc' },
       })
     : [];
 
-  const photos = category.photos.map(photo => ({
-    id: photo.id,
-    filename: photo.filename,
-    originalName: photo.originalName,
-    description: photo.description,
-    createdAt: photo.createdAt.toISOString(),
-    uploader: photo.uploader.username,
-    mediaType: photo.mediaType,
-    thumbnailUrl: photo.mediaType === 'image' ? getPublicThumbnailUrl(photo.filename) : null,
-    fileUrl: getPublicObjectUrl(photo.filename),
-    isOwner: viewerId !== null && photo.uploaderId === viewerId,
-  }));
-
-  const latestPhotoDate = category.photos[0]?.createdAt ?? category.createdAt;
+  const latestPhotoDate = stats._max.createdAt ?? category.createdAt;
 
   return (
     <div className="space-y-6">
@@ -128,7 +93,7 @@ export default async function AlbumPage({
           <div className="text-muted-foreground flex flex-wrap items-center gap-2 text-xs">
             <span className="bg-primary/10 text-primary inline-flex items-center gap-1 rounded-full px-3 py-1">
               <ImageIcon className="h-3 w-3" />
-              {photos.length} 个媒体
+              {total} 个媒体
             </span>
             <span className="bg-muted inline-flex items-center gap-1 rounded-full px-3 py-1">
               <CalendarClock className="h-3 w-3" />
@@ -143,7 +108,7 @@ export default async function AlbumPage({
         <div className="flex items-center gap-2">
           <SearchTrigger categoryId={category.id} />
           <SortToggle />
-          {session?.user ? (
+          {viewer ? (
             <UploadDialog
               categories={uploadCategories}
               defaultCategoryId={category.id}
@@ -155,22 +120,19 @@ export default async function AlbumPage({
         </div>
       </div>
 
-      {photos.length === 0 ? (
-        <div className="text-muted-foreground rounded-lg border border-dashed p-10 text-center">
-          暂无媒体，欢迎上传。
-        </div>
-      ) : (
-        <PhotoGrid
-          photos={photos}
-          canManageAll={canManageAll}
-          allowOwnActions={allowOwnActions}
+      <Suspense fallback={<PhotoGridSkeleton />}>
+        <PhotoPage
+          categoryId={category.id}
+          sort={sort}
+          page={page}
+          total={total}
+          viewerId={viewer?.id ?? null}
+          canManageAll={viewer?.role === 'admin'}
+          deepPhotoId={deepPhotoId}
           downloadStrategy="api"
+          emptyTitle="暂无媒体，欢迎上传。"
         />
-      )}
+      </Suspense>
     </div>
   );
 }
-
-// client-only search trigger moved to components/search-trigger.tsx
-
-// client-only search trigger moved to components/search-trigger.tsx
diff --git a/app/api/categories/route.ts b/app/api/categories/route.ts
index 14683cf..77a10b5 100644
--- a/app/api/categories/route.ts
+++ b/app/api/categories/route.ts
@@ -1,16 +1,15 @@
-import { auth } from '@/lib/auth';
+import { getViewer } from '@/lib/access';
+import { type Visibility, categoryWhereFor } from '@/lib/access-rules';
 import { requireAdmin } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
-import type { CategoryVisibility, Prisma } from '@prisma/client';
+import { visibilitySchema } from '@/lib/validation';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
 
-const visibilityEnum = z.enum(['private', 'internal', 'public'] satisfies CategoryVisibility[]);
-
 const categoryCreateSchema = z.object({
   name: z.string().min(1, '分类名称不能为空'),
   description: z.string().optional(),
-  visibility: visibilityEnum.default('internal'),
+  visibility: visibilitySchema.default('internal'),
 });
 
 const categoryUpdateSchema = categoryCreateSchema.extend({
@@ -26,18 +25,13 @@ type CategoryWithCount = {
   name: string;
   description: string | null;
   createdAt: Date;
-  visibility: CategoryVisibility;
+  visibility: Visibility;
   _count: { photos: number };
 };
 
 export async function GET() {
-  const session = await auth();
-  const internalVisibilities: CategoryVisibility[] = ['internal', 'public'];
-  const where: Prisma.CategoryWhereInput = !session?.user
-    ? { visibility: 'public' }
-    : session.user.role === 'admin'
-      ? {}
-      : { visibility: { in: internalVisibilities } };
+  const viewer = await getViewer();
+  const where = categoryWhereFor(viewer);
 
   const categories = (await prisma.category.findMany({
     where,
diff --git a/app/api/files/[id]/route.ts b/app/api/files/[id]/route.ts
index 616327e..d94b0be 100644
--- a/app/api/files/[id]/route.ts
+++ b/app/api/files/[id]/route.ts
@@ -1,3 +1,4 @@
+import { canTouchFileSet } from '@/lib/access-rules';
 import { requireAdmin, requireAuth } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
 import { deleteFileAsset, getPublicFileUrl } from '@/lib/storage';
@@ -19,9 +20,7 @@ export async function GET(_: Request, { params }: { params: Promise<{ id: string
 
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const session = authCheck.session;
-    const userId = Number(session.user.id);
-    const isAdmin = session.user.role === 'admin';
+    const { viewer } = authCheck;
 
     const file = await prisma.file.findUnique({
       where: { id },
@@ -44,14 +43,9 @@ export async function GET(_: Request, { params }: { params: Promise<{ id: string
 
     if (!file) return NextResponse.json({ message: '未找到' }, { status: 404 });
 
-    // Permission check
-    const canView =
-      isAdmin ||
-      file.fileSet.visibility === 'public' ||
-      file.fileSet.visibility === 'internal' ||
-      file.fileSet.createdBy === userId;
-
-    if (!canView) return NextResponse.json({ message: '无权限' }, { status: 403 });
+    if (!canTouchFileSet(viewer, file.fileSet)) {
+      return NextResponse.json({ message: '无权限' }, { status: 403 });
+    }
 
     return NextResponse.json({
       item: {
@@ -88,9 +82,7 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
 
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const session = authCheck.session;
-    const userId = Number(session.user.id);
-    const isAdmin = session.user.role === 'admin';
+    const { viewer } = authCheck;
 
     const file = await prisma.file.findUnique({
       where: { id },
@@ -100,7 +92,7 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
     if (!file) return NextResponse.json({ message: '未找到' }, { status: 404 });
 
     // Only uploader or admin can update
-    if (!isAdmin && file.uploaderId !== userId) {
+    if (viewer.role !== 'admin' && file.uploaderId !== viewer.id) {
       return NextResponse.json({ message: '无权限' }, { status: 403 });
     }
 
@@ -152,9 +144,7 @@ export async function DELETE(_: Request, { params }: { params: Promise<{ id: str
 
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const session = authCheck.session;
-    const userId = Number(session.user.id);
-    const isAdmin = session.user.role === 'admin';
+    const { viewer } = authCheck;
 
     const file = await prisma.file.findUnique({
       where: { id },
@@ -164,7 +154,7 @@ export async function DELETE(_: Request, { params }: { params: Promise<{ id: str
     if (!file) return NextResponse.json({ message: '未找到' }, { status: 404 });
 
     // Only uploader or admin can delete
-    if (!isAdmin && file.uploaderId !== userId) {
+    if (viewer.role !== 'admin' && file.uploaderId !== viewer.id) {
       return NextResponse.json({ message: '无权限' }, { status: 403 });
     }
 
diff --git a/app/api/files/inline-url/route.ts b/app/api/files/inline-url/route.ts
index 5494aba..dc67171 100644
--- a/app/api/files/inline-url/route.ts
+++ b/app/api/files/inline-url/route.ts
@@ -1,3 +1,4 @@
+import { canTouchFileSet } from '@/lib/access-rules';
 import { requireAuth } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
 import { getPresignedInlineFileUrl } from '@/lib/storage';
@@ -11,9 +12,7 @@ export async function GET(req: Request) {
   try {
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const session = authCheck.session;
-    const userId = Number(session.user.id);
-    const isAdmin = session.user.role === 'admin';
+    const { viewer } = authCheck;
 
     const url = new URL(req.url);
     const fileIdStr = url.searchParams.get('fileId');
@@ -39,13 +38,7 @@ export async function GET(req: Request) {
       return NextResponse.json({ message: '文件不存在' }, { status: 404 });
     }
 
-    const canView =
-      isAdmin ||
-      file.fileSet.visibility === 'public' ||
-      file.fileSet.visibility === 'internal' ||
-      file.fileSet.createdBy === userId;
-
-    if (!canView) {
+    if (!canTouchFileSet(viewer, file.fileSet)) {
       return NextResponse.json({ message: '无权限' }, { status: 403 });
     }
 
diff --git a/app/api/files/preview-proxy/route.ts b/app/api/files/preview-proxy/route.ts
index 184f133..1ae9d47 100644
--- a/app/api/files/preview-proxy/route.ts
+++ b/app/api/files/preview-proxy/route.ts
@@ -1,3 +1,4 @@
+import { canTouchFileSet } from '@/lib/access-rules';
 import { requireAuth } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
 import { getFileBuffer, guessMimeFromFilename } from '@/lib/storage';
@@ -12,9 +13,7 @@ export async function GET(req: Request) {
   try {
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const session = authCheck.session;
-    const userId = Number(session.user.id);
-    const isAdmin = session.user.role === 'admin';
+    const { viewer } = authCheck;
 
     const url = new URL(req.url);
     const fileIdStr = url.searchParams.get('fileId');
@@ -39,13 +38,7 @@ export async function GET(req: Request) {
       return NextResponse.json({ message: '文件不存在' }, { status: 404 });
     }
 
-    const canView =
-      isAdmin ||
-      file.fileSet.visibility === 'public' ||
-      file.fileSet.visibility === 'internal' ||
-      file.fileSet.createdBy === userId;
-
-    if (!canView) {
+    if (!canTouchFileSet(viewer, file.fileSet)) {
       return NextResponse.json({ message: '无权限' }, { status: 403 });
     }
 
diff --git a/app/api/files/route.ts b/app/api/files/route.ts
index 7be3779..9539fa3 100644
--- a/app/api/files/route.ts
+++ b/app/api/files/route.ts
@@ -1,3 +1,4 @@
+import { canTouchFileSet } from '@/lib/access-rules';
 import { requireAuth } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
 import { deleteFileAsset, getPublicFileUrl, persistFile } from '@/lib/storage';
@@ -22,9 +23,7 @@ export async function GET(req: Request) {
   try {
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const session = authCheck.session;
-    const userId = Number(session.user.id);
-    const isAdmin = session.user.role === 'admin';
+    const { viewer } = authCheck;
 
     const url = new URL(req.url);
     const filesetId = url.searchParams.get('filesetId');
@@ -44,13 +43,7 @@ export async function GET(req: Request) {
       return NextResponse.json({ message: '文件集不存在' }, { status: 404 });
     }
 
-    const canView =
-      isAdmin ||
-      fileset.visibility === 'public' ||
-      fileset.visibility === 'internal' ||
-      fileset.createdBy === userId;
-
-    if (!canView) {
+    if (!canTouchFileSet(viewer, fileset)) {
       return NextResponse.json({ message: '无权限' }, { status: 403 });
     }
 
@@ -97,9 +90,7 @@ export async function POST(req: Request) {
   try {
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const session = authCheck.session;
-    const userId = Number(session.user.id);
-    const isAdmin = session.user.role === 'admin';
+    const { viewer } = authCheck;
 
     const formData = await req.formData();
     const file = formData.get('file') as File | null;
@@ -122,15 +113,7 @@ export async function POST(req: Request) {
       return NextResponse.json({ message: '文件集不存在' }, { status: 404 });
     }
 
-    // Only admin or members can upload to private fileset
-    // Internal/public filesets allow all authenticated users
-    const canUpload =
-      isAdmin ||
-      fileset.createdBy === userId ||
-      fileset.visibility === 'internal' ||
-      fileset.visibility === 'public';
-
-    if (!canUpload) {
+    if (!canTouchFileSet(viewer, fileset)) {
       return NextResponse.json({ message: '无权限上传' }, { status: 403 });
     }
 
@@ -146,7 +129,7 @@ export async function POST(req: Request) {
         mimeType: file.type || 'application/octet-stream',
         size: file.size,
         filesetId,
-        uploaderId: userId,
+        uploaderId: viewer.id,
       },
       select: {
         id: true,
diff --git a/app/api/filesets/[id]/route.ts b/app/api/filesets/[id]/route.ts
index 0475931..4735aa7 100644
--- a/app/api/filesets/[id]/route.ts
+++ b/app/api/filesets/[id]/route.ts
@@ -1,13 +1,15 @@
+import { canTouchFileSet } from '@/lib/access-rules';
 import { requireAdmin, requireAuth } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
 import { deleteFileAsset } from '@/lib/storage';
+import { visibilitySchema } from '@/lib/validation';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
 
 const updateSchema = z.object({
   name: z.string().min(1).max(100).optional(),
   description: z.string().max(500).optional(),
-  visibility: z.enum(['private', 'internal', 'public']).optional(),
+  visibility: visibilitySchema.optional(),
 });
 
 /**
@@ -21,8 +23,7 @@ export async function GET(_: Request, { params }: { params: Promise<{ id: string
 
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const userId = Number(authCheck.session.user.id);
-    const isAdmin = authCheck.session.user.role === 'admin';
+    const { viewer } = authCheck;
 
     const item = await prisma.fileSet.findUnique({
       where: { id },
@@ -40,14 +41,9 @@ export async function GET(_: Request, { params }: { params: Promise<{ id: string
 
     if (!item) return NextResponse.json({ message: '未找到' }, { status: 404 });
 
-    // Permission check: private (admin only), internal/public (authenticated), or creator
-    const canView =
-      isAdmin ||
-      item.visibility === 'public' ||
-      item.visibility === 'internal' ||
-      item.createdBy === userId;
-
-    if (!canView) return NextResponse.json({ message: '无权限' }, { status: 403 });
+    if (!canTouchFileSet(viewer, item)) {
+      return NextResponse.json({ message: '无权限' }, { status: 403 });
+    }
 
     return NextResponse.json({
       item: {
diff --git a/app/api/filesets/route.ts b/app/api/filesets/route.ts
index 1788d3a..7b328d6 100644
--- a/app/api/filesets/route.ts
+++ b/app/api/filesets/route.ts
@@ -1,12 +1,14 @@
+import { fileSetWhereFor } from '@/lib/access-rules';
 import { requireAdmin, requireAuth } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
+import { visibilitySchema } from '@/lib/validation';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
 
 const createSchema = z.object({
   name: z.string().min(1).max(100),
   description: z.string().max(500).optional(),
-  visibility: z.enum(['private', 'internal', 'public']).default('internal'),
+  visibility: visibilitySchema.default('internal'),
 });
 
 /**
@@ -17,23 +19,8 @@ export async function GET(req: Request) {
   try {
     const authCheck = await requireAuth();
     if (!authCheck.ok) return authCheck.error;
-    const session = authCheck.session;
-    const userId = Number(session.user.id);
-    const isAdmin = session.user.role === 'admin';
 
-    // Visibility logic:
-    // - private: admin only
-    // - internal: all authenticated users
-    // - public: everyone (but we require auth in this endpoint)
-    const where = isAdmin
-      ? {} // Admin sees all
-      : {
-          OR: [
-            { visibility: 'internal' as const },
-            { visibility: 'public' as const },
-            { createdBy: userId },
-          ],
-        };
+    const where = fileSetWhereFor(authCheck.viewer);
 
     type FileSetItem = {
       id: number;
@@ -78,7 +65,6 @@ export async function POST(req: Request) {
   try {
     const adminCheck = await requireAdmin();
     if (!adminCheck.ok) return adminCheck.error;
-    const session = adminCheck.session;
 
     const body = await req.json().catch(() => undefined);
     const parsed = createSchema.safeParse(body);
@@ -94,7 +80,7 @@ export async function POST(req: Request) {
         name: parsed.data.name,
         description: parsed.data.description,
         visibility: parsed.data.visibility,
-        createdBy: Number(session.user.id),
+        createdBy: adminCheck.viewer.id,
       },
       select: {
         id: true,
diff --git a/app/api/photos/route.ts b/app/api/photos/route.ts
index af6c168..d95fb72 100644
--- a/app/api/photos/route.ts
+++ b/app/api/photos/route.ts
@@ -1,4 +1,5 @@
-import { auth } from '@/lib/auth';
+import { getViewer } from '@/lib/access';
+import { categoryWhereFor } from '@/lib/access-rules';
 import { requireAuth } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
 import {
@@ -10,7 +11,6 @@ import {
   getPublicThumbnailUrl,
   isNotFoundError,
 } from '@/lib/storage';
-import type { CategoryVisibility, Prisma } from '@prisma/client';
 import JSZip from 'jszip';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
@@ -62,18 +62,11 @@ export async function GET(request: Request) {
   const page = Math.max(Number.parseInt(pageParam, 10) || 1, 1);
   const pageSize = Math.min(Math.max(Number.parseInt(pageSizeParam, 10) || 24, 1), 96);
 
-  const session = await auth();
-  const internalVisibilities: CategoryVisibility[] = ['internal', 'public'];
-  const visibilityFilter: Prisma.PhotoWhereInput = !session?.user
-    ? { category: { visibility: 'public' } }
-    : session.user.role === 'admin'
-      ? {}
-      : { category: { visibility: { in: internalVisibilities } } };
-
   const parsedCategoryId = categoryIdParam ? Number.parseInt(categoryIdParam, 10) : undefined;
-  const where: Prisma.PhotoWhereInput = {
+  const viewer = await getViewer();
+  const where = {
     ...(Number.isInteger(parsedCategoryId) ? { categoryId: parsedCategoryId } : {}),
-    ...visibilityFilter,
+    category: categoryWhereFor(viewer),
   };
 
   const photos = (await prisma.photo.findMany({
@@ -133,8 +126,9 @@ export async function POST(request: Request) {
     return NextResponse.json({ error: parsed.error.flatten().fieldErrors }, { status: 400 });
   }
 
+  // 打包下载同样受可见性约束：否则只要猜到 id，就能取到无权浏览的相册原图
   const photos = await prisma.photo.findMany({
-    where: { id: { in: parsed.data.ids } },
+    where: { id: { in: parsed.data.ids }, category: categoryWhereFor(authCheck.viewer) },
     select: {
       id: true,
       filename: true,
@@ -209,12 +203,8 @@ export async function DELETE(request: Request) {
     return NextResponse.json({ deleted: 0 }, { status: 200 });
   }
 
-  const requesterId = Number.parseInt(authCheck.session.user!.id, 10);
-  if (Number.isNaN(requesterId)) {
-    return NextResponse.json({ error: '用户信息异常' }, { status: 400 });
-  }
-
-  const isAdmin = authCheck.session.user?.role === 'admin';
+  const requesterId = authCheck.viewer.id;
+  const isAdmin = authCheck.viewer.role === 'admin';
   const unauthorized = targetPhotos.filter(photo => photo.uploaderId !== requesterId && !isAdmin);
   if (unauthorized.length > 0) {
     return NextResponse.json({ error: '仅可操作自己上传的照片' }, { status: 403 });
@@ -260,13 +250,8 @@ export async function PATCH(request: Request) {
     return NextResponse.json({ error: '媒体不存在' }, { status: 404 });
   }
 
-  const requesterId = Number.parseInt(authCheck.session.user!.id, 10);
-  if (Number.isNaN(requesterId)) {
-    return NextResponse.json({ error: '用户信息异常' }, { status: 400 });
-  }
-
-  const isAdmin = authCheck.session.user?.role === 'admin';
-  if (!isAdmin && photo.uploaderId !== requesterId) {
+  const { viewer } = authCheck;
+  if (viewer.role !== 'admin' && photo.uploaderId !== viewer.id) {
     return NextResponse.json({ error: '仅可操作自己上传的照片' }, { status: 403 });
   }
 
diff --git a/app/api/profile/route.ts b/app/api/profile/route.ts
index 96df68f..c836de2 100644
--- a/app/api/profile/route.ts
+++ b/app/api/profile/route.ts
@@ -25,10 +25,7 @@ export async function PATCH(request: Request) {
     return NextResponse.json({ error: parsed.error }, { status: 400 });
   }
 
-  const userId = Number.parseInt(authCheck.session.user!.id, 10);
-  if (Number.isNaN(userId)) {
-    return NextResponse.json({ error: '用户信息异常' }, { status: 400 });
-  }
+  const userId = authCheck.viewer.id;
 
   if (parsed.data.type === 'username') {
     const exists = await prisma.user.findUnique({ where: { username: parsed.data.username } });
diff --git a/app/api/search/route.ts b/app/api/search/route.ts
index 982fd7e..0a22b5a 100644
--- a/app/api/search/route.ts
+++ b/app/api/search/route.ts
@@ -1,54 +1,117 @@
-import { auth } from '@/lib/auth';
+import { getViewer } from '@/lib/access';
+import { canViewCategory, categoryWhereFor } from '@/lib/access-rules';
 import { prisma } from '@/lib/db';
+import { getPublicObjectUrl, getPublicThumbnailUrl } from '@/lib/storage';
 import { NextResponse } from 'next/server';
 
-export async function GET(req: Request) {
-  const session = await auth();
-  const url = new URL(req.url);
-  const q = (url.searchParams.get('q') || '').trim();
-  const filesetIdParam = url.searchParams.get('filesetId');
-  const mime = url.searchParams.get('mime');
+const CATEGORY_LIMIT = 5;
+const PHOTO_LIMIT = 45;
 
-  const where: Record<string, unknown> = {};
+type CategoryRow = {
+  id: number;
+  name: string;
+  description: string | null;
+  _count: { photos: number };
+};
 
-  // Text search on originalName or description
-  if (q) {
-    where.OR = [{ originalName: { contains: q } }, { description: { contains: q } }];
-  }
+type PhotoRow = {
+  id: number;
+  filename: string;
+  originalName: string;
+  description: string | null;
+  mediaType: 'image' | 'video';
+  categoryId: number;
+  category: { name: string };
+};
 
-  // Filter by fileset
-  if (filesetIdParam) {
-    const filesetId = Number(filesetIdParam);
-    if (!Number.isNaN(filesetId)) {
-      where.filesetId = filesetId;
-    }
+/**
+ * GET /api/search?q=&categoryId=
+ * 相册域的全局搜索。categoryId 用于"在某个相册内搜索"，此时只返回该相册的媒体。
+ */
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const q = (searchParams.get('q') ?? '').trim();
+  if (!q) {
+    return NextResponse.json({ categories: [], photos: [] });
   }
 
-  // Filter by MIME
-  if (mime) {
-    where.mimeType = mime;
-  }
+  const viewer = await getViewer();
+  const categoryFilter = categoryWhereFor(viewer);
+
+  const rawCategoryId = searchParams.get('categoryId');
+  const parsedCategoryId = rawCategoryId ? Number.parseInt(rawCategoryId, 10) : NaN;
+  const scopedCategoryId = Number.isInteger(parsedCategoryId) ? parsedCategoryId : null;
 
-  // Visibility for unauthenticated users: only public file sets
-  if (!session?.user) {
-    where.fileSet = { visibility: 'public' } as any;
+  if (scopedCategoryId !== null) {
+    const scope = await prisma.category.findUnique({
+      where: { id: scopedCategoryId },
+      select: { visibility: true },
+    });
+    if (!scope || canViewCategory(viewer, scope) !== 'allow') {
+      return NextResponse.json({ categories: [], photos: [] });
+    }
   }
 
-  const items = await prisma.file.findMany({
-    where,
-    orderBy: { updatedAt: 'desc' },
+  const photoWhere = {
+    category:
+      scopedCategoryId === null
+        ? categoryFilter
+        : { AND: [categoryFilter, { id: scopedCategoryId }] },
+    OR: [{ originalName: { contains: q } }, { description: { contains: q } }],
+  };
+
+  const photoQuery = prisma.photo.findMany({
+    where: photoWhere,
+    orderBy: { createdAt: 'desc' },
+    take: PHOTO_LIMIT,
     select: {
       id: true,
       filename: true,
       originalName: true,
       description: true,
-      size: true,
-      mimeType: true,
-      filesetId: true,
-      createdAt: true,
-      updatedAt: true,
+      mediaType: true,
+      categoryId: true,
+      category: { select: { name: true } },
+    },
+  }) as Promise<PhotoRow[]>;
+
+  if (scopedCategoryId !== null) {
+    const photos = await photoQuery;
+    return NextResponse.json({ categories: [], photos: mapPhotos(photos) });
+  }
+
+  const categoryQuery = prisma.category.findMany({
+    where: {
+      AND: [categoryFilter, { OR: [{ name: { contains: q } }, { description: { contains: q } }] }],
     },
-    take: 50,
+    orderBy: { createdAt: 'desc' },
+    take: CATEGORY_LIMIT,
+    select: { id: true, name: true, description: true, _count: { select: { photos: true } } },
+  }) as Promise<CategoryRow[]>;
+
+  const [categories, photos] = await Promise.all([categoryQuery, photoQuery]);
+
+  return NextResponse.json({
+    categories: categories.map(category => ({
+      id: category.id,
+      name: category.name,
+      description: category.description,
+      photoCount: category._count.photos,
+    })),
+    photos: mapPhotos(photos),
   });
-  return NextResponse.json({ items });
+}
+
+function mapPhotos(photos: PhotoRow[]) {
+  return photos.map(photo => ({
+    id: photo.id,
+    categoryId: photo.categoryId,
+    categoryName: photo.category.name,
+    filename: photo.filename,
+    originalName: photo.originalName,
+    description: photo.description,
+    mediaType: photo.mediaType,
+    thumbnailUrl: photo.mediaType === 'image' ? getPublicThumbnailUrl(photo.filename) : null,
+    fileUrl: getPublicObjectUrl(photo.filename),
+  }));
 }
diff --git a/app/api/share/unlock/route.ts b/app/api/share/unlock/route.ts
new file mode 100644
index 0000000..dd8c6b8
--- /dev/null
+++ b/app/api/share/unlock/route.ts
@@ -0,0 +1,50 @@
+import { prisma } from '@/lib/db';
+import { buildUnlockCookie } from '@/lib/share-auth';
+import bcrypt from 'bcryptjs';
+import { isAfter } from 'date-fns';
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+
+const unlockSchema = z.object({
+  token: z.string().min(8),
+  password: z.string().min(1).max(200),
+});
+
+/**
+ * POST /api/share/unlock
+ * 密码走请求体而不是查询串：查询串会留在浏览器历史与服务器访问日志里。
+ */
+export async function POST(request: Request) {
+  const body = await request.json().catch(() => null);
+  const parsed = unlockSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json({ error: '参数错误' }, { status: 400 });
+  }
+
+  const { token, password } = parsed.data;
+
+  const shareLink = await prisma.shareLink.findUnique({
+    where: { token },
+    select: { password: true, expiresAt: true },
+  });
+
+  if (!shareLink) {
+    return NextResponse.json({ error: '分享链接不存在' }, { status: 404 });
+  }
+
+  if (shareLink.expiresAt && isAfter(new Date(), shareLink.expiresAt)) {
+    return NextResponse.json({ error: '分享链接已过期' }, { status: 410 });
+  }
+
+  if (shareLink.password) {
+    const match = await bcrypt.compare(password, shareLink.password);
+    if (!match) {
+      return NextResponse.json({ error: '密码错误' }, { status: 401 });
+    }
+  }
+
+  const response = NextResponse.json({ ok: true });
+  const cookie = buildUnlockCookie(token, shareLink.expiresAt);
+  response.cookies.set(cookie.name, cookie.value, cookie.options);
+  return response;
+}
diff --git a/app/api/upload/route.ts b/app/api/upload/route.ts
index 833617b..e9726b0 100644
--- a/app/api/upload/route.ts
+++ b/app/api/upload/route.ts
@@ -1,3 +1,4 @@
+import { canUploadToCategory } from '@/lib/access-rules';
 import { requireAuth } from '@/lib/auth-guards';
 import { prisma } from '@/lib/db';
 import {
@@ -46,15 +47,12 @@ export async function POST(request: Request) {
     return NextResponse.json({ error: '分类不存在' }, { status: 404 });
   }
 
-  const isAdmin = authCheck.session.user?.role === 'admin';
-  if (category.visibility === 'private' && !isAdmin) {
+  const { viewer } = authCheck;
+  if (!canUploadToCategory(viewer, category)) {
     return NextResponse.json({ error: '无权在该分类上传' }, { status: 403 });
   }
 
-  const uploaderId = Number.parseInt(authCheck.session.user!.id, 10);
-  if (Number.isNaN(uploaderId)) {
-    return NextResponse.json({ error: '用户信息异常' }, { status: 400 });
-  }
+  const uploaderId = viewer.id;
 
   try {
     const isImage = file.type.startsWith('image/');
diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..3aaeadf
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { ErrorState } from '@/components/error-state';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <ErrorState
+      detail={process.env.NODE_ENV === 'production' ? error?.digest : error?.message}
+      reset={reset}
+    />
+  );
+}
diff --git a/app/files/_file-list.tsx b/app/files/_file-list.tsx
new file mode 100644
index 0000000..a268c1e
--- /dev/null
+++ b/app/files/_file-list.tsx
@@ -0,0 +1,71 @@
+import { FilesTable } from '@/components/files/table';
+import type { FileItem } from '@/components/files/types';
+import { PaginationControls } from '@/components/pagination-controls';
+import { prisma } from '@/lib/db';
+import { clampPage } from '@/lib/params';
+import { getPublicFileUrl } from '@/lib/storage';
+
+const PAGE_SIZE = 50;
+
+type FileRow = {
+  id: number;
+  filename: string;
+  originalName: string;
+  description: string | null;
+  mimeType: string;
+  size: number;
+  uploaderId: number;
+  createdAt: Date;
+};
+
+export async function FileList({
+  filesetId,
+  query,
+  page,
+}: {
+  filesetId: number;
+  query: string;
+  page: number | null;
+}) {
+  const where = { filesetId, ...(query ? { originalName: { contains: query } } : {}) };
+
+  // 先数总数再钳页码：skip 依赖钳后的值，否则越界的 ?p= 会渲染出一片空白
+  const total = (await prisma.file.count({ where })) as number;
+  const currentPage = clampPage(page, total, PAGE_SIZE);
+
+  const rows = (await prisma.file.findMany({
+    where,
+    orderBy: { createdAt: 'desc' },
+    skip: (currentPage - 1) * PAGE_SIZE,
+    take: PAGE_SIZE,
+    select: {
+      id: true,
+      filename: true,
+      originalName: true,
+      description: true,
+      mimeType: true,
+      size: true,
+      uploaderId: true,
+      createdAt: true,
+    },
+  })) as FileRow[];
+
+  const files: FileItem[] = rows.map(row => ({
+    id: row.id,
+    filename: row.filename,
+    originalName: row.originalName,
+    description: row.description,
+    mimeType: row.mimeType,
+    size: row.size,
+    uploaderId: row.uploaderId,
+    createdAt: row.createdAt.toISOString(),
+    url: getPublicFileUrl(row.filename),
+  }));
+
+  return (
+    <div className="space-y-4">
+      <FilesTable files={files} />
+      <PaginationControls page={currentPage} total={total} pageSize={PAGE_SIZE} />
+    </div>
+  );
+}
diff --git a/app/files/error.tsx b/app/files/error.tsx
new file mode 100644
index 0000000..d270c51
--- /dev/null
+++ b/app/files/error.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { ErrorState } from '@/components/error-state';
+
+export default function FilesError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <ErrorState
+      title="文件管理加载失败"
+      description="无法读取文件列表，请重试。"
+      detail={process.env.NODE_ENV === 'production' ? error?.digest : error?.message}
+      reset={reset}
+    />
+  );
+}
diff --git a/app/files/page.tsx b/app/files/page.tsx
index 1cdc614..0693498 100644
--- a/app/files/page.tsx
+++ b/app/files/page.tsx
@@ -1,7 +1,80 @@
-import { FileManager } from '@/components/file-manager';
+import { FilesSidebar } from '@/components/files/sidebar';
+import { FilesToolbar } from '@/components/files/toolbar';
+import { FileTableSkeleton } from '@/components/skeletons/file-table-skeleton';
+import { EmptyState } from '@/components/ui/empty-state';
+import { requireViewer } from '@/lib/access';
+import { fileSetWhereFor } from '@/lib/access-rules';
+import { prisma } from '@/lib/db';
+import { type SearchParams, readInt, readString } from '@/lib/params';
+import { FileIcon } from 'lucide-react';
+import { Suspense } from 'react';
 
-export const dynamic = 'force-dynamic';
+import { FileList } from './_file-list';
 
-export default function FilesPage() {
-  return <FileManager />;
+type FileSetRow = {
+  id: number;
+  name: string;
+  description: string | null;
+  _count: { files: number };
+};
+
+export default async function FilesPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
+  const viewer = await requireViewer('/files');
+  const params = await searchParams;
+
+  const fileSets = (await prisma.fileSet.findMany({
+    where: fileSetWhereFor(viewer),
+    orderBy: { updatedAt: 'desc' },
+    select: { id: true, name: true, description: true, _count: { select: { files: true } } },
+  })) as FileSetRow[];
+
+  // ?fileset= 指向无权访问或不存在的集合时，静默回落到第一个可见集合
+  const requestedId = readInt(params, 'fileset');
+  const activeSet = fileSets.find(set => set.id === requestedId) ?? fileSets[0] ?? null;
+  const query = readString(params, 'q');
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-col gap-2">
+          <div className="text-foreground flex items-center gap-2">
+            <FileIcon className="text-primary h-5 w-5" />
+            <h1 className="text-2xl font-semibold tracking-tight">文件管理</h1>
+          </div>
+        </div>
+        <FilesToolbar initialQuery={query} activeFileSetId={activeSet?.id ?? null} />
+      </div>
+
+      <div className="flex gap-4 md:gap-8">
+        <FilesSidebar
+          fileSets={fileSets.map(set => ({
+            id: set.id,
+            name: set.name,
+            description: set.description,
+            fileCount: set._count.files,
+          }))}
+          activeFileSetId={activeSet?.id ?? null}
+        />
+
+        <section className="min-w-0 flex-1">
+          {activeSet && (
+            <div className="mb-3">
+              <h2 className="text-lg font-medium">{activeSet.name}</h2>
+              {activeSet.description && (
+                <p className="text-muted-foreground text-sm">{activeSet.description}</p>
+              )}
+            </div>
+          )}
+
+          {activeSet ? (
+            <Suspense fallback={<FileTableSkeleton />}>
+              <FileList filesetId={activeSet.id} query={query} page={readInt(params, 'p')} />
+            </Suspense>
+          ) : (
+            <EmptyState title="暂无文件分类" />
+          )}
+        </section>
+      </div>
+    </div>
+  );
 }
diff --git a/app/global-error.tsx b/app/global-error.tsx
new file mode 100644
index 0000000..2f26600
--- /dev/null
+++ b/app/global-error.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { ErrorState } from '@/components/error-state';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="zh-CN">
+      <body>
+        <ErrorState
+          description="应用遇到了严重错误，请重试或联系管理员。"
+          detail={process.env.NODE_ENV === 'production' ? error?.digest : error?.message}
+          reset={reset}
+        />
+      </body>
+    </html>
+  );
+}
diff --git a/app/loading.tsx b/app/loading.tsx
new file mode 100644
index 0000000..195c269
--- /dev/null
+++ b/app/loading.tsx
@@ -0,0 +1,5 @@
+import { PageSkeleton } from '@/components/skeletons/page-skeleton';
+
+export default function Loading() {
+  return <PageSkeleton rows={3} />;
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
index a9ce2fa..7c15f7b 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,11 +1,13 @@
 import { LoginTabs } from '@/components/profile/login-tabs';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { auth } from '@/lib/auth';
+import { getViewer } from '@/lib/access';
 import { redirect } from 'next/navigation';
 
 export default async function LoginPage() {
-  const session = await auth();
-  if (session?.user) {
+  // 用 getViewer 而不是 auth()：被拒绝/待审核的账号可能仍持有旧 JWT，
+  // 若按会话存在就跳回首页，会与 /profile 等地的 requireViewer 形成重定向死循环。
+  const viewer = await getViewer();
+  if (viewer) {
     redirect('/');
   }
 
diff --git a/app/page.tsx b/app/page.tsx
index 4171b70..3a61aad 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,16 +1,34 @@
 import { SearchTrigger } from '@/components/search-trigger';
+import { CategoryGridSkeleton } from '@/components/skeletons/category-grid-skeleton';
 import { SortToggle } from '@/components/sort-toggle';
 import { Card } from '@/components/ui/card';
+import { EmptyState } from '@/components/ui/empty-state';
 import { UploadDialog } from '@/components/upload-dialog';
-import { auth } from '@/lib/auth';
+import { getViewer } from '@/lib/access';
+import { type Visibility, categoryWhereFor } from '@/lib/access-rules';
 import { prisma } from '@/lib/db';
 import { getPublicThumbnailUrl } from '@/lib/storage';
-import type { CategoryVisibility, Prisma } from '@prisma/client';
 import { Images } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { Suspense } from 'react';
 
-export default async function HomePage({
+/** 首页不做分页：相册是人工创建的，这个上限只是防止无界负载 */
+const CATEGORY_CAP = 200;
+
+export default function HomePage({
+  searchParams,
+}: {
+  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  return (
+    <Suspense fallback={<CategoryGridSkeleton />}>
+      <HomeContent searchParams={searchParams} />
+    </Suspense>
+  );
+}
+
+async function HomeContent({
   searchParams,
 }: {
   searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
@@ -18,26 +36,22 @@ export default async function HomePage({
   const params = (await searchParams) ?? {};
   const sort =
     (typeof params['sort'] === 'string' ? params['sort'] : undefined) === 'asc' ? 'asc' : 'desc';
-  const session = await auth();
+  const viewer = await getViewer();
   type CategoryCard = {
     id: number;
     name: string;
     description: string | null;
-    visibility: CategoryVisibility;
+    visibility: Visibility;
     createdAt: Date;
     photos: Array<{ filename: string; createdAt: Date }>;
     _count: { photos: number };
   };
-  const internalVisibilities: CategoryVisibility[] = ['internal', 'public'];
-  const where: Prisma.CategoryWhereInput = !session?.user
-    ? { visibility: 'public' }
-    : session.user.role === 'admin'
-      ? {}
-      : { visibility: { in: internalVisibilities } };
+  const where = categoryWhereFor(viewer);
 
   const categories = (await prisma.category.findMany({
     where,
     orderBy: { createdAt: sort },
+    take: CATEGORY_CAP,
     include: {
       _count: { select: { photos: true } },
       photos: {
@@ -65,7 +79,7 @@ export default async function HomePage({
           <SearchTrigger />
           <SortToggle />
         </div>
-        {session?.user && categories.length > 0 && (
+        {viewer && categories.length > 0 && (
           <div className="flex items-center gap-2">
             <UploadDialog
               categories={categories.map(category => ({
@@ -81,7 +95,10 @@ export default async function HomePage({
       </div>
 
       {categories.length === 0 ? (
-        <EmptyState />
+        <EmptyState
+          icon={<Images className="text-primary h-10 w-10" />}
+          title="暂无相册，请先在控制台中创建分类。"
+        />
       ) : (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {categories.map(category => (
@@ -110,6 +127,12 @@ export default async function HomePage({
           ))}
         </div>
       )}
+
+      {categories.length >= CATEGORY_CAP ? (
+        <p className="text-muted-foreground text-center text-xs">
+          相册过多，仅显示前 {CATEGORY_CAP} 个。
+        </p>
+      ) : null}
     </div>
   );
 }
@@ -130,14 +153,5 @@ function ImageFill({ filename }: { filename: string }) {
   );
 }
 
-function EmptyState() {
-  return (
-    <div className="text-muted-foreground flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10">
-      <Images className="text-primary h-10 w-10" />
-      <p>暂无相册，请先在控制台中创建分类。</p>
-    </div>
-  );
-}
-
 // client-only search trigger moved to components/search-trigger.tsx
 // client-only search trigger moved to components/search-trigger.tsx
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index c1035eb..c14a118 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -1,22 +1,17 @@
 import { AccountForms } from '@/components/profile/account-forms';
-import { auth } from '@/lib/auth';
+import { getViewer } from '@/lib/access';
 import { prisma } from '@/lib/db';
 import { UserCircle } from 'lucide-react';
 import { redirect } from 'next/navigation';
 
 export default async function ProfilePage() {
-  const session = await auth();
-  if (!session?.user) {
+  const viewer = await getViewer();
+  if (!viewer) {
     redirect('/login?callbackUrl=/profile');
   }
 
-  const userId = Number.parseInt(session.user.id, 10);
-  if (Number.isNaN(userId)) {
-    redirect('/login');
-  }
-
   const user = await prisma.user.findUnique({
-    where: { id: userId },
+    where: { id: viewer.id },
     select: {
       id: true,
       username: true,
diff --git a/app/share/[token]/error.tsx b/app/share/[token]/error.tsx
new file mode 100644
index 0000000..6d487f4
--- /dev/null
+++ b/app/share/[token]/error.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { ErrorState } from '@/components/error-state';
+
+export default function ShareError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <ErrorState
+      title="分享加载失败"
+      description="无法读取分享内容，请重试。"
+      detail={process.env.NODE_ENV === 'production' ? error?.digest : error?.message}
+      reset={reset}
+    />
+  );
+}
diff --git a/app/share/[token]/not-found.tsx b/app/share/[token]/not-found.tsx
new file mode 100644
index 0000000..b9b167c
--- /dev/null
+++ b/app/share/[token]/not-found.tsx
@@ -0,0 +1,5 @@
+import { EmptyState } from '@/components/ui/empty-state';
+
+export default function ShareNotFound() {
+  return <EmptyState title="分享不存在" description="该分享链接无效或已被删除。" />;
+}
diff --git a/app/share/[token]/page.tsx b/app/share/[token]/page.tsx
index 1d36bcf..a46453b 100644
--- a/app/share/[token]/page.tsx
+++ b/app/share/[token]/page.tsx
@@ -1,6 +1,97 @@
-import { ShareViewer } from '@/components/share-viewer';
+import { PHOTO_PAGE_SIZE, PhotoPage } from '@/components/photo-page';
+import { SharePasswordForm } from '@/components/share-password-form';
+import { PhotoGridSkeleton } from '@/components/skeletons/photo-grid-skeleton';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { EmptyState } from '@/components/ui/empty-state';
+import { prisma } from '@/lib/db';
+import { type SearchParams, clampPage, readInt } from '@/lib/params';
+import { isShareUnlocked } from '@/lib/share-auth';
+import { format, isAfter } from 'date-fns';
+import { zhCN } from 'date-fns/locale';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
 
-export default async function SharePage({ params }: { params: Promise<{ token: string }> }) {
+type ShareRow = {
+  token: string;
+  expiresAt: Date | null;
+  password: string | null;
+  category: { id: number; name: string; description: string | null };
+};
+
+export default async function SharePage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ token: string }>;
+  searchParams?: Promise<SearchParams>;
+}) {
   const { token } = await params;
-  return <ShareViewer token={token} />;
+  const q = (await searchParams) ?? {};
+
+  const shareLink = (await prisma.shareLink.findUnique({
+    where: { token },
+    select: {
+      token: true,
+      expiresAt: true,
+      password: true,
+      category: { select: { id: true, name: true, description: true } },
+    },
+  })) as ShareRow | null;
+
+  if (!shareLink) {
+    notFound();
+  }
+
+  if (shareLink.expiresAt && isAfter(new Date(), shareLink.expiresAt)) {
+    return <EmptyState title="分享链接已过期" description="该链接已失效，请联系分享者重新生成。" />;
+  }
+
+  const { category } = shareLink;
+
+  // 需要密码却尚未解锁时，连媒体数量都不透露——解锁判断在服务端完成，
+  // 不再靠"先发请求、再看是不是 401"猜出来
+  if (shareLink.password && !(await isShareUnlocked(token))) {
+    return (
+      <div className="mx-auto max-w-sm space-y-4">
+        <Alert>
+          <AlertTitle>访问受限</AlertTitle>
+          <AlertDescription>请输入访问密码</AlertDescription>
+        </Alert>
+        <SharePasswordForm token={token} />
+      </div>
+    );
+  }
+
+  const total = (await prisma.photo.count({ where: { categoryId: category.id } })) as number;
+  const page = clampPage(readInt(q, 'p'), total, PHOTO_PAGE_SIZE);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h1 className="text-2xl font-semibold tracking-tight">{category.name}</h1>
+        {category.description && (
+          <p className="text-muted-foreground text-sm">{category.description}</p>
+        )}
+        <p className="text-muted-foreground text-xs">
+          {total} 个媒体
+          {shareLink.expiresAt &&
+            ` · 链接将在 ${format(shareLink.expiresAt, 'yyyy-MM-dd HH:mm', { locale: zhCN })} 过期`}
+        </p>
+      </div>
+
+      <Suspense fallback={<PhotoGridSkeleton />}>
+        <PhotoPage
+          categoryId={category.id}
+          sort="desc"
+          page={page}
+          total={total}
+          deepPhotoId={readInt(q, 'photo')}
+          viewerId={null}
+          canManageAll={false}
+          downloadStrategy="public"
+          emptyTitle="暂未添加任何媒体。"
+        />
+      </Suspense>
+    </div>
+  );
 }
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index 9e5655d..f7cd56e 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -1,9 +1,9 @@
-import { auth } from '@/lib/auth';
+import { getViewer } from '@/lib/access';
 import { redirect } from 'next/navigation';
 
 export default async function UploadPage() {
-  const session = await auth();
-  if (!session?.user) {
+  const viewer = await getViewer();
+  if (!viewer) {
     redirect('/login');
   }
 
diff --git a/components/admin-dashboard.tsx b/components/admin-dashboard.tsx
deleted file mode 100644
index 6df1fdb..0000000
--- a/components/admin-dashboard.tsx
+++ /dev/null
@@ -1,1007 +0,0 @@
-'use client';
-
-import { AdminFileSets } from '@/components/admin-filesets';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Textarea } from '@/components/ui/textarea';
-import type { CategoryVisibility } from '@prisma/client';
-import { Copy, LayoutDashboard, Trash2 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState, useTransition } from 'react';
-
-interface CategoryItem {
-  id: number;
-  name: string;
-  description: string | null;
-  photoCount: number;
-  createdAt: string;
-  visibility: 'private' | 'internal' | 'public';
-}
-
-interface UserItem {
-  id: number;
-  username: string;
-  role: string;
-  status: 'pending' | 'active' | 'rejected';
-  photoCount: number;
-  createdAt: string;
-}
-
-interface ShareLinkItem {
-  id: number;
-  token: string;
-  categoryId: number;
-  categoryName: string;
-  expiresAt: string | null;
-  createdAt: string;
-}
-
-interface FileSetItem {
-  id: number;
-  name: string;
-  description: string | null;
-  visibility: 'private' | 'internal' | 'public';
-  fileCount: number;
-  createdAt: string;
-}
-
-interface AdminDashboardProps {
-  categories: CategoryItem[];
-  users: UserItem[];
-  shareLinks: ShareLinkItem[];
-  fileSets: FileSetItem[];
-}
-
-export function AdminDashboard({ categories, users, shareLinks, fileSets }: AdminDashboardProps) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
-  const [error, setError] = useState<string | null>(null);
-
-  const pendingUsers = users.filter(u => u.status === 'pending');
-  const activeUsersInitial = users.filter(u => u.status === 'active');
-  const [activeUsers, setActiveUsers] = useState<UserItem[]>(activeUsersInitial);
-
-  const [editingCategoryId, setEditingCategoryId] = useState<number | null>(null);
-  const [categoryName, setCategoryName] = useState('');
-  const [categoryDescription, setCategoryDescription] = useState('');
-  const [categoryVisibility, setCategoryVisibility] = useState<CategoryVisibility>('internal');
-
-  const [selectedUserRole, setSelectedUserRole] = useState<Record<number, string>>({});
-  const [userQuery, setUserQuery] = useState('');
-  const [userPage, setUserPage] = useState(1);
-  const [userPageSize, setUserPageSize] = useState(20);
-  const [userTotal, setUserTotal] = useState<number>(activeUsersInitial.length);
-  const [usersLoading, setUsersLoading] = useState(false);
-  const [usersError, setUsersError] = useState<string | null>(null);
-  const [filterRole, setFilterRole] = useState<string>('');
-
-  const [deletingUserId, setDeletingUserId] = useState<number | null>(null);
-  const [deleteTransferUserId, setDeleteTransferUserId] = useState<number | null>(null);
-  const [deletePhotosDirectly, setDeletePhotosDirectly] = useState(false);
-
-  const [resettingPasswordUserId, setResettingPasswordUserId] = useState<number | null>(null);
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmNewPassword, setConfirmNewPassword] = useState('');
-
-  const [shareCategoryId, setShareCategoryId] = useState<number | null>(null);
-  const [sharePassword, setSharePassword] = useState('');
-  const [expireHours, setExpireHours] = useState('24');
-  const [shareMessage, setShareMessage] = useState<string | null>(null);
-  const [copySuccessMessage, setCopySuccessMessage] = useState<string | null>(null);
-
-  const shareBaseUrl = useMemo(() => {
-    if (typeof window !== 'undefined') {
-      return `${window.location.origin}/share/`;
-    }
-    return '/share/';
-  }, []);
-
-  const resetCategoryForm = () => {
-    setEditingCategoryId(null);
-    setCategoryName('');
-    setCategoryDescription('');
-    setCategoryVisibility('internal');
-  };
-
-  const handleCategorySubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setError(null);
-
-    if (!categoryName.trim()) {
-      setError('分类名称不能为空');
-      return;
-    }
-
-    const payload = {
-      name: categoryName.trim(),
-      description: categoryDescription.trim() || undefined,
-      visibility: categoryVisibility,
-    };
-
-    const isEditing = editingCategoryId !== null;
-    const response = await fetch('/api/categories', {
-      method: isEditing ? 'PUT' : 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(
-        isEditing
-          ? {
-              ...payload,
-              id: editingCategoryId,
-            }
-          : payload
-      ),
-    });
-
-    if (!response.ok) {
-      const body = await response.json().catch(() => ({}));
-      setError(body.error ?? '操作失败');
-      return;
-    }
-
-    resetCategoryForm();
-    startTransition(() => router.refresh());
-  };
-
-  const handleCategoryDelete = async (id: number) => {
-    setError(null);
-    if (!window.confirm('确认删除该分类？分类内的照片将一并删除。')) {
-      return;
-    }
-
-    const response = await fetch('/api/categories', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id }),
-    });
-
-    if (!response.ok) {
-      const body = await response.json().catch(() => ({}));
-      setError(body.error ?? '删除失败');
-      return;
-    }
-
-    startTransition(() => router.refresh());
-  };
-
-  const handleUserRoleChange = async (id: number, role: string) => {
-    setError(null);
-
-    const response = await fetch('/api/users', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, role }),
-    });
-
-    if (!response.ok) {
-      const body = await response.json().catch(() => ({}));
-      setError(body.error ?? '角色更新失败');
-      return;
-    }
-
-    startTransition(() => router.refresh());
-  };
-
-  const fetchUsers = async () => {
-    setUsersLoading(true);
-    setUsersError(null);
-    try {
-      const params = new URLSearchParams({
-        page: String(userPage),
-        pageSize: String(userPageSize),
-      });
-      if (userQuery.trim()) params.set('q', userQuery.trim());
-      if (filterRole) params.set('role', filterRole);
-      params.set('status', 'active');
-      const res = await fetch(`/api/users?${params.toString()}`);
-      const body = await res.json().catch(() => ({}));
-      if (!res.ok) throw new Error(body.error ?? '加载失败');
-      const list: UserItem[] = (body.data ?? []).filter((u: unknown): u is UserItem => {
-        return (
-          !!u && typeof (u as UserItem).status === 'string' && (u as UserItem).status === 'active'
-        );
-      });
-      setActiveUsers(list);
-      setUserTotal(body.meta?.total ?? list.length);
-    } catch (e) {
-      setUsersError(e instanceof Error ? e.message : '加载失败');
-    } finally {
-      setUsersLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchUsers();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userPage, userPageSize]);
-
-  const handleUserStatusChange = async (id: number, status: 'pending' | 'active' | 'rejected') => {
-    setError(null);
-
-    const response = await fetch('/api/users', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id, status }),
-    });
-
-    if (!response.ok) {
-      const body = await response.json().catch(() => ({}));
-      setError(body.error ?? '状态更新失败');
-      return;
-    }
-
-    startTransition(() => router.refresh());
-  };
-
-  const handlePasswordReset = async () => {
-    if (!resettingPasswordUserId) return;
-    setError(null);
-
-    if (!newPassword || !confirmNewPassword) {
-      setError('请输入新密码');
-      return;
-    }
-
-    if (newPassword !== confirmNewPassword) {
-      setError('两次输入的密码不一致');
-      return;
-    }
-
-    if (newPassword.length < 6) {
-      setError('密码至少 6 位');
-      return;
-    }
-
-    const response = await fetch('/api/users/password', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        userId: resettingPasswordUserId,
-        newPassword: newPassword,
-      }),
-    });
-
-    if (!response.ok) {
-      const body = await response.json().catch(() => ({}));
-      setError(body.error ?? '密码重置失败');
-      return;
-    }
-
-    setResettingPasswordUserId(null);
-    setNewPassword('');
-    setConfirmNewPassword('');
-    alert('密码重置成功');
-  };
-
-  const handleUserDelete = async () => {
-    if (!deletingUserId) return;
-    setError(null);
-
-    const user = users.find(u => u.id === deletingUserId);
-    if (!user) return;
-
-    if (user.photoCount > 0 && !deletePhotosDirectly && !deleteTransferUserId) {
-      setError('该用户有照片，请选择转移到其他用户或直接删除照片');
-      return;
-    }
-
-    const payload: { id: number; transferToUserId?: number; deletePhotos?: boolean } = {
-      id: deletingUserId,
-    };
-
-    if (deletePhotosDirectly) {
-      payload.deletePhotos = true;
-    } else if (deleteTransferUserId) {
-      payload.transferToUserId = deleteTransferUserId;
-    }
-
-    const response = await fetch('/api/users', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    });
-
-    if (!response.ok) {
-      const body = await response.json().catch(() => ({}));
-      setError(body.error ?? '删除用户失败');
-      return;
-    }
-
-    setDeletingUserId(null);
-    setDeleteTransferUserId(null);
-    setDeletePhotosDirectly(false);
-    startTransition(() => router.refresh());
-  };
-
-  const handleShareCreate = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setShareMessage(null);
-    setError(null);
-
-    if (!shareCategoryId) {
-      setError('请选择分类');
-      return;
-    }
-
-    const response = await fetch('/api/share', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        categoryId: shareCategoryId,
-        password: sharePassword.trim() || undefined,
-        expireInHours: Number.parseInt(expireHours, 10) || undefined,
-      }),
-    });
-
-    const body = await response.json().catch(() => ({}));
-
-    if (!response.ok) {
-      setError(body.error ?? '分享链接创建失败');
-      return;
-    }
-
-    setShareMessage(`${shareBaseUrl}${body.token}`);
-    setSharePassword('');
-    setExpireHours('24');
-    startTransition(() => router.refresh());
-  };
-
-  const handleCopyShareLink = async (token: string) => {
-    const fullUrl = `${shareBaseUrl}${token}`;
-    setCopySuccessMessage(null);
-    setError(null);
-    try {
-      await navigator.clipboard.writeText(fullUrl);
-      setCopySuccessMessage('链接已复制到剪贴板');
-      setTimeout(() => setCopySuccessMessage(null), 3000);
-    } catch {
-      setError('复制失败，请手动复制链接');
-    }
-  };
-
-  const handleDeleteShareLink = async (id: number) => {
-    setError(null);
-    if (!window.confirm('确认删除该分享链接？')) {
-      return;
-    }
-
-    const response = await fetch('/api/share', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id }),
-    });
-
-    if (!response.ok) {
-      const body = await response.json().catch(() => ({}));
-      setError(body.error ?? '删除分享链接失败');
-      return;
-    }
-
-    startTransition(() => router.refresh());
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <LayoutDashboard className="text-primary h-6 w-6" />
-          <h1 className="text-2xl font-semibold tracking-tight">控制台</h1>
-        </div>
-        <p className="text-muted-foreground text-sm">管理分类、成员以及分享链接。</p>
-      </div>
-
-      {error && (
-        <Alert variant="destructive">
-          <AlertTitle>操作失败</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      <Tabs defaultValue="categories">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="categories">相册</TabsTrigger>
-          <TabsTrigger value="filesets">文件</TabsTrigger>
-          <TabsTrigger value="users">成员</TabsTrigger>
-          <TabsTrigger value="share">分享</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="categories" className="space-y-6">
-          <form
-            onSubmit={handleCategorySubmit}
-            className="bg-card grid gap-4 rounded-lg border p-4 sm:grid-cols-2"
-          >
-            <div className="space-y-2">
-              <Label htmlFor="category-name">分类名称</Label>
-              <Input
-                id="category-name"
-                value={categoryName}
-                onChange={event => setCategoryName(event.target.value)}
-                placeholder="例如：活动照片"
-                required
-              />
-            </div>
-            <div className="space-y-2 sm:col-span-2">
-              <Label htmlFor="category-description">描述</Label>
-              <Textarea
-                id="category-description"
-                value={categoryDescription}
-                onChange={event => setCategoryDescription(event.target.value)}
-                placeholder="可选，用于说明该分类"
-                rows={3}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="category-visibility">可见范围</Label>
-              <Select
-                value={categoryVisibility}
-                onValueChange={value => setCategoryVisibility(value as CategoryVisibility)}
-              >
-                <SelectTrigger id="category-visibility">
-                  <SelectValue placeholder="选择可见范围" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="private">私有（仅管理员）</SelectItem>
-                  <SelectItem value="internal">共有（系统用户可见）</SelectItem>
-                  <SelectItem value="public">公开（互联网访客可见）</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex flex-col gap-2 sm:col-span-2 sm:flex-row">
-              <Button type="submit" disabled={isPending}>
-                {editingCategoryId ? '保存修改' : '添加分类'}
-              </Button>
-              {editingCategoryId && (
-                <Button type="button" variant="ghost" onClick={resetCategoryForm}>
-                  取消编辑
-                </Button>
-              )}
-            </div>
-          </form>
-
-          <div className="overflow-hidden rounded-lg border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>名称</TableHead>
-                  <TableHead>描述</TableHead>
-                  <TableHead>可见范围</TableHead>
-                  <TableHead className="w-24 text-right">照片数</TableHead>
-                  <TableHead className="w-48">操作</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {categories.map(category => (
-                  <TableRow key={category.id}>
-                    <TableCell className="font-medium">{category.name}</TableCell>
-                    <TableCell className="text-muted-foreground">
-                      {category.description || '—'}
-                    </TableCell>
-                    <TableCell>
-                      <VisibilityBadge visibility={category.visibility} />
-                    </TableCell>
-                    <TableCell className="text-right">{category.photoCount}</TableCell>
-                    <TableCell className="flex flex-wrap items-center gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => {
-                          setEditingCategoryId(category.id);
-                          setCategoryName(category.name);
-                          setCategoryDescription(category.description ?? '');
-                          setCategoryVisibility(category.visibility);
-                        }}
-                      >
-                        编辑
-                      </Button>
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        onClick={() => handleCategoryDelete(category.id)}
-                      >
-                        删除
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="filesets" className="space-y-6">
-          <AdminFileSets filesets={fileSets} />
-        </TabsContent>
-
-        <TabsContent value="users" className="space-y-6">
-          {pendingUsers.length > 0 && (
-            <div className="space-y-2">
-              <h3 className="text-lg font-medium">待审核用户</h3>
-              <div className="overflow-hidden rounded-lg border">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>用户名</TableHead>
-                      <TableHead>创建时间</TableHead>
-                      <TableHead className="w-48">操作</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {pendingUsers.map(user => (
-                      <TableRow key={user.id}>
-                        <TableCell className="font-medium">{user.username}</TableCell>
-                        <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
-                        <TableCell className="flex flex-wrap items-center gap-2">
-                          <Button
-                            variant="default"
-                            size="sm"
-                            onClick={() => handleUserStatusChange(user.id, 'active')}
-                          >
-                            通过
-                          </Button>
-                          <Button
-                            variant="destructive"
-                            size="sm"
-                            onClick={() => handleUserStatusChange(user.id, 'rejected')}
-                          >
-                            拒绝
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
-            </div>
-          )}
-
-          <div className="space-y-2">
-            <h3 className="text-lg font-medium">已激活成员</h3>
-            <div className="bg-card flex flex-col gap-3 rounded-lg border p-4 md:flex-row md:items-center md:justify-between">
-              <div className="flex items-center gap-2">
-                <Input
-                  placeholder="搜索用户名"
-                  value={userQuery}
-                  onChange={e => setUserQuery(e.target.value)}
-                  className="w-64"
-                />
-                <Select
-                  value={filterRole || '__all__'}
-                  onValueChange={v => setFilterRole(v === '__all__' ? '' : v)}
-                >
-                  <SelectTrigger className="h-8 w-[140px]">
-                    <SelectValue placeholder="角色筛选" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="__all__">全部角色</SelectItem>
-                    <SelectItem value="admin">管理员</SelectItem>
-                    <SelectItem value="member">成员</SelectItem>
-                  </SelectContent>
-                </Select>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    setUserPage(1);
-                    fetchUsers();
-                  }}
-                >
-                  搜索
-                </Button>
-              </div>
-              <div className="flex items-center gap-2">
-                <label className="text-muted-foreground text-sm">每页</label>
-                <Select
-                  value={String(userPageSize)}
-                  onValueChange={v => setUserPageSize(Number(v))}
-                >
-                  <SelectTrigger className="h-8 w-[100px]">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="10">10</SelectItem>
-                    <SelectItem value="20">20</SelectItem>
-                    <SelectItem value="50">50</SelectItem>
-                  </SelectContent>
-                </Select>
-                <div className="text-muted-foreground text-sm">共 {userTotal} 条</div>
-              </div>
-            </div>
-            <div className="overflow-hidden rounded-lg border">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="min-w-[180px]">用户名</TableHead>
-                    <TableHead className="min-w-[170px]">角色</TableHead>
-                    <TableHead className="min-w-[170px]">上传数</TableHead>
-                    <TableHead className="min-w-[180px]">创建时间</TableHead>
-                    <TableHead className="min-w-[380px]">操作</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {activeUsers.map(user => (
-                    <TableRow key={user.id}>
-                      <TableCell className="font-medium">{user.username}</TableCell>
-                      <TableCell>
-                        <Badge variant={user.role === 'admin' ? 'default' : 'secondary'}>
-                          {user.role}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>{user.photoCount}</TableCell>
-                      <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
-                      <TableCell className="p-0">
-                        <div className="flex items-center gap-2 px-4 py-3">
-                          <Select
-                            value={selectedUserRole[user.id] ?? user.role}
-                            onValueChange={value =>
-                              setSelectedUserRole(prev => ({
-                                ...prev,
-                                [user.id]: value,
-                              }))
-                            }
-                          >
-                            <SelectTrigger className="h-8 w-[90px]">
-                              <SelectValue placeholder="角色" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="admin">管理员</SelectItem>
-                              <SelectItem value="member">成员</SelectItem>
-                            </SelectContent>
-                          </Select>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="h-8"
-                            onClick={() =>
-                              handleUserRoleChange(user.id, selectedUserRole[user.id] ?? user.role)
-                            }
-                          >
-                            保存
-                          </Button>
-                          <Button
-                            variant="secondary"
-                            size="sm"
-                            className="h-8"
-                            onClick={() => setResettingPasswordUserId(user.id)}
-                          >
-                            重置
-                          </Button>
-                          <Button
-                            variant="destructive"
-                            size="sm"
-                            className="h-8"
-                            onClick={() => setDeletingUserId(user.id)}
-                          >
-                            删除
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <div className="text-muted-foreground text-sm">
-                第 {userPage} 页 / 共 {Math.max(1, Math.ceil(userTotal / userPageSize))} 页
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  disabled={userPage <= 1}
-                  onClick={() => setUserPage(p => Math.max(p - 1, 1))}
-                >
-                  上一页
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  disabled={userPage * userPageSize >= userTotal}
-                  onClick={() => setUserPage(p => p + 1)}
-                >
-                  下一页
-                </Button>
-              </div>
-            </div>
-            {usersLoading && (
-              <Alert>
-                <AlertTitle>加载中</AlertTitle>
-                <AlertDescription>正在加载成员列表...</AlertDescription>
-              </Alert>
-            )}
-            {usersError && (
-              <Alert variant="destructive">
-                <AlertTitle>加载失败</AlertTitle>
-                <AlertDescription>{usersError}</AlertDescription>
-              </Alert>
-            )}
-          </div>
-        </TabsContent>
-
-        <TabsContent value="share" className="space-y-6">
-          <form
-            onSubmit={handleShareCreate}
-            className="bg-card grid gap-4 rounded-lg border p-4 md:grid-cols-2"
-          >
-            <div className="space-y-2">
-              <Label htmlFor="share-category">选择分类</Label>
-              <Select onValueChange={value => setShareCategoryId(Number(value))}>
-                <SelectTrigger id="share-category">
-                  <SelectValue placeholder="选择需要分享的分类" />
-                </SelectTrigger>
-                <SelectContent>
-                  {categories.map(category => (
-                    <SelectItem key={category.id} value={String(category.id)}>
-                      {category.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="share-password">访问密码（可选）</Label>
-              <Input
-                id="share-password"
-                value={sharePassword}
-                onChange={event => setSharePassword(event.target.value)}
-                placeholder="留空则不设置密码"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="share-expire">过期时间 (小时)</Label>
-              <Input
-                id="share-expire"
-                type="number"
-                min={1}
-                max={720}
-                value={expireHours}
-                onChange={event => setExpireHours(event.target.value)}
-              />
-            </div>
-            <div className="flex items-end">
-              <Button type="submit" disabled={isPending}>
-                生成分享链接
-              </Button>
-            </div>
-          </form>
-
-          {shareMessage && (
-            <Alert>
-              <AlertTitle>分享链接创建成功</AlertTitle>
-              <AlertDescription className="break-all">{shareMessage}</AlertDescription>
-            </Alert>
-          )}
-
-          {copySuccessMessage && (
-            <Alert>
-              <AlertTitle>操作成功</AlertTitle>
-              <AlertDescription>{copySuccessMessage}</AlertDescription>
-            </Alert>
-          )}
-
-          <div className="overflow-hidden rounded-lg border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>分类</TableHead>
-                  <TableHead>链接</TableHead>
-                  <TableHead>过期时间</TableHead>
-                  <TableHead className="w-32">操作</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {shareLinks.map(link => (
-                  <TableRow key={link.id}>
-                    <TableCell>{link.categoryName}</TableCell>
-                    <TableCell className="text-primary text-sm break-all">
-                      {shareBaseUrl}
-                      {link.token}
-                    </TableCell>
-                    <TableCell>
-                      {link.expiresAt ? new Date(link.expiresAt).toLocaleString() : '不限'}
-                    </TableCell>
-                    <TableCell className="flex flex-wrap items-center gap-2">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleCopyShareLink(link.token)}
-                        title="复制链接"
-                      >
-                        <Copy className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        onClick={() => handleDeleteShareLink(link.id)}
-                        title="删除链接"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </TabsContent>
-      </Tabs>
-
-      <Dialog
-        open={deletingUserId !== null}
-        onOpenChange={open => !open && setDeletingUserId(null)}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>删除用户</DialogTitle>
-            <DialogDescription>
-              {deletingUserId && users.find(u => u.id === deletingUserId)?.photoCount
-                ? `该用户有 ${users.find(u => u.id === deletingUserId)?.photoCount} 张照片，请选择如何处理这些照片：`
-                : '确认删除该用户？'}
-            </DialogDescription>
-          </DialogHeader>
-          {deletingUserId && users.find(u => u.id === deletingUserId)?.photoCount ? (
-            <RadioGroup
-              value={deletePhotosDirectly ? 'delete' : deleteTransferUserId ? 'transfer' : ''}
-              onValueChange={value => {
-                if (value === 'delete') {
-                  setDeletePhotosDirectly(true);
-                  setDeleteTransferUserId(null);
-                } else {
-                  setDeletePhotosDirectly(false);
-                }
-              }}
-            >
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="delete" id="delete-photos" />
-                <Label htmlFor="delete-photos">直接删除所有照片</Label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="transfer" id="transfer-photos" />
-                <Label htmlFor="transfer-photos">转移到其他用户</Label>
-              </div>
-            </RadioGroup>
-          ) : null}
-          {deletingUserId &&
-          !deletePhotosDirectly &&
-          users.find(u => u.id === deletingUserId)?.photoCount ? (
-            <div className="space-y-2">
-              <Label htmlFor="transfer-user">选择目标用户</Label>
-              <Select
-                value={deleteTransferUserId?.toString() ?? ''}
-                onValueChange={value => setDeleteTransferUserId(Number(value))}
-              >
-                <SelectTrigger id="transfer-user">
-                  <SelectValue placeholder="选择用户" />
-                </SelectTrigger>
-                <SelectContent>
-                  {activeUsers
-                    .filter(u => u.id !== deletingUserId)
-                    .map(user => (
-                      <SelectItem key={user.id} value={String(user.id)}>
-                        {user.username}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
-            </div>
-          ) : null}
-          <DialogFooter>
-            <Button
-              variant="ghost"
-              onClick={() => {
-                setDeletingUserId(null);
-                setDeleteTransferUserId(null);
-                setDeletePhotosDirectly(false);
-              }}
-            >
-              取消
-            </Button>
-            <Button variant="destructive" onClick={handleUserDelete}>
-              确认删除
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog
-        open={resettingPasswordUserId !== null}
-        onOpenChange={open => {
-          if (!open) {
-            setResettingPasswordUserId(null);
-            setNewPassword('');
-            setConfirmNewPassword('');
-          }
-        }}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>重置密码</DialogTitle>
-            <DialogDescription>
-              为用户 <strong>{users.find(u => u.id === resettingPasswordUserId)?.username}</strong>{' '}
-              设置新密码
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="new-password">新密码</Label>
-              <Input
-                id="new-password"
-                type="password"
-                value={newPassword}
-                onChange={e => setNewPassword(e.target.value)}
-                placeholder="至少 6 位"
-                required
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="confirm-new-password">确认新密码</Label>
-              <Input
-                id="confirm-new-password"
-                type="password"
-                value={confirmNewPassword}
-                onChange={e => setConfirmNewPassword(e.target.value)}
-                placeholder="再次输入新密码"
-                required
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button
-              variant="ghost"
-              onClick={() => {
-                setResettingPasswordUserId(null);
-                setNewPassword('');
-                setConfirmNewPassword('');
-              }}
-            >
-              取消
-            </Button>
-            <Button variant="default" onClick={handlePasswordReset}>
-              确认重置
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
-
-function VisibilityBadge({ visibility }: { visibility: CategoryVisibility }) {
-  const config: Record<
-    CategoryVisibility,
-    { label: string; variant: 'destructive' | 'outline' | 'secondary' }
-  > = {
-    private: { label: '私有', variant: 'destructive' },
-    internal: { label: '共有', variant: 'secondary' },
-    public: { label: '公开', variant: 'outline' },
-  };
-  const { label, variant } = config[visibility];
-  return <Badge variant={variant}>{label}</Badge>;
-}
diff --git a/components/admin-filesets.tsx b/components/admin-filesets.tsx
index 8962b17..7a61ea3 100644
--- a/components/admin-filesets.tsx
+++ b/components/admin-filesets.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import type { FileSetItem } from '@/components/admin/types';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -11,6 +11,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { ErrorAlert } from '@/components/ui/error-alert';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -29,26 +30,18 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
 import { Pencil, Plus, Trash2 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-interface FileSetItem {
-  id: number;
-  name: string;
-  description: string | null;
-  visibility: 'private' | 'internal' | 'public';
-  fileCount: number;
-  createdAt: string;
-}
+import { useState, useTransition } from 'react';
 
 interface AdminFileSetsProps {
   filesets: FileSetItem[];
 }
 
-export function AdminFileSets({ filesets: initialFileSets }: AdminFileSetsProps) {
+export function AdminFileSets({ filesets }: AdminFileSetsProps) {
   const router = useRouter();
-  const [filesets, setFilesets] = useState<FileSetItem[]>(initialFileSets);
+  const [isPending, startTransition] = useTransition();
   const [error, setError] = useState<string | null>(null);
 
   // Create/Edit dialog state
@@ -103,13 +96,8 @@ export function AdminFileSets({ filesets: initialFileSets }: AdminFileSetsProps)
         throw new Error(json?.message || '操作失败');
       }
 
-      // Refresh filesets list
-      const listRes = await fetch('/api/filesets');
-      const listJson = await listRes.json();
-      setFilesets(listJson.items || []);
-
       setShowDialog(false);
-      router.refresh();
+      startTransition(() => router.refresh());
     } catch (e: any) {
       setError(e?.message || '操作失败');
     } finally {
@@ -133,9 +121,7 @@ export function AdminFileSets({ filesets: initialFileSets }: AdminFileSetsProps)
         throw new Error(json?.message || '删除失败');
       }
 
-      // Remove from local state
-      setFilesets(filesets.filter(fs => fs.id !== id));
-      router.refresh();
+      startTransition(() => router.refresh());
     } catch (e: any) {
       setError(e?.message || '删除失败');
     }
@@ -167,13 +153,14 @@ export function AdminFileSets({ filesets: initialFileSets }: AdminFileSetsProps)
         </Button>
       </div>
 
-      {error && (
-        <Alert variant="destructive">
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
+      {error && <ErrorAlert message={error} />}
 
-      <div className="rounded-md border">
+      <div
+        className={cn(
+          'rounded-md border transition-opacity',
+          isPending && 'pointer-events-none opacity-60'
+        )}
+      >
         <Table>
           <TableHeader>
             <TableRow>
diff --git a/components/admin/admin-categories-tab.tsx b/components/admin/admin-categories-tab.tsx
new file mode 100644
index 0000000..e592082
--- /dev/null
+++ b/components/admin/admin-categories-tab.tsx
@@ -0,0 +1,218 @@
+'use client';
+
+import type { CategoryItem } from '@/components/admin/types';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ErrorAlert } from '@/components/ui/error-alert';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import type { CategoryVisibility } from '@prisma/client';
+import { useRouter } from 'next/navigation';
+import { useState, useTransition } from 'react';
+
+function VisibilityBadge({ visibility }: { visibility: CategoryVisibility }) {
+  const config: Record<
+    CategoryVisibility,
+    { label: string; variant: 'destructive' | 'outline' | 'secondary' }
+  > = {
+    private: { label: '私有', variant: 'destructive' },
+    internal: { label: '共有', variant: 'secondary' },
+    public: { label: '公开', variant: 'outline' },
+  };
+  const { label, variant } = config[visibility];
+  return <Badge variant={variant}>{label}</Badge>;
+}
+
+export function AdminCategoriesTab({ categories }: { categories: CategoryItem[] }) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  const [editingCategoryId, setEditingCategoryId] = useState<number | null>(null);
+  const [categoryName, setCategoryName] = useState('');
+  const [categoryDescription, setCategoryDescription] = useState('');
+  const [categoryVisibility, setCategoryVisibility] = useState<CategoryVisibility>('internal');
+
+  const resetCategoryForm = () => {
+    setEditingCategoryId(null);
+    setCategoryName('');
+    setCategoryDescription('');
+    setCategoryVisibility('internal');
+  };
+
+  const handleCategorySubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(null);
+
+    if (!categoryName.trim()) {
+      setError('分类名称不能为空');
+      return;
+    }
+
+    const payload = {
+      name: categoryName.trim(),
+      description: categoryDescription.trim() || undefined,
+      visibility: categoryVisibility,
+    };
+
+    const isEditing = editingCategoryId !== null;
+    const response = await fetch('/api/categories', {
+      method: isEditing ? 'PUT' : 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(isEditing ? { ...payload, id: editingCategoryId } : payload),
+    });
+
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      setError(body.error ?? '操作失败');
+      return;
+    }
+
+    resetCategoryForm();
+    startTransition(() => router.refresh());
+  };
+
+  const handleCategoryDelete = async (id: number) => {
+    setError(null);
+    if (!window.confirm('确认删除该分类？分类内的照片将一并删除。')) {
+      return;
+    }
+
+    const response = await fetch('/api/categories', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      setError(body.error ?? '删除失败');
+      return;
+    }
+
+    startTransition(() => router.refresh());
+  };
+
+  return (
+    <>
+      {error && <ErrorAlert title="操作失败" message={error} />}
+
+      <form
+        onSubmit={handleCategorySubmit}
+        className="bg-card grid gap-4 rounded-lg border p-4 sm:grid-cols-2"
+      >
+        <div className="space-y-2">
+          <Label htmlFor="category-name">分类名称</Label>
+          <Input
+            id="category-name"
+            value={categoryName}
+            onChange={event => setCategoryName(event.target.value)}
+            placeholder="例如：活动照片"
+            required
+          />
+        </div>
+        <div className="space-y-2 sm:col-span-2">
+          <Label htmlFor="category-description">描述</Label>
+          <Textarea
+            id="category-description"
+            value={categoryDescription}
+            onChange={event => setCategoryDescription(event.target.value)}
+            placeholder="可选，用于说明该分类"
+            rows={3}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="category-visibility">可见范围</Label>
+          <Select
+            value={categoryVisibility}
+            onValueChange={value => setCategoryVisibility(value as CategoryVisibility)}
+          >
+            <SelectTrigger id="category-visibility">
+              <SelectValue placeholder="选择可见范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="private">私有（仅管理员）</SelectItem>
+              <SelectItem value="internal">共有（系统用户可见）</SelectItem>
+              <SelectItem value="public">公开（互联网访客可见）</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex flex-col gap-2 sm:col-span-2 sm:flex-row">
+          <Button type="submit" disabled={isPending}>
+            {editingCategoryId ? '保存修改' : '添加分类'}
+          </Button>
+          {editingCategoryId && (
+            <Button type="button" variant="ghost" onClick={resetCategoryForm}>
+              取消编辑
+            </Button>
+          )}
+        </div>
+      </form>
+
+      <div className="overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>名称</TableHead>
+              <TableHead>描述</TableHead>
+              <TableHead>可见范围</TableHead>
+              <TableHead className="w-24 text-right">照片数</TableHead>
+              <TableHead className="w-48">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {categories.map(category => (
+              <TableRow key={category.id}>
+                <TableCell className="font-medium">{category.name}</TableCell>
+                <TableCell className="text-muted-foreground">
+                  {category.description || '—'}
+                </TableCell>
+                <TableCell>
+                  <VisibilityBadge visibility={category.visibility} />
+                </TableCell>
+                <TableCell className="text-right">{category.photoCount}</TableCell>
+                <TableCell className="flex flex-wrap items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setEditingCategoryId(category.id);
+                      setCategoryName(category.name);
+                      setCategoryDescription(category.description ?? '');
+                      setCategoryVisibility(category.visibility);
+                    }}
+                  >
+                    编辑
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => handleCategoryDelete(category.id)}
+                  >
+                    删除
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+}
diff --git a/components/admin/admin-share-tab.tsx b/components/admin/admin-share-tab.tsx
new file mode 100644
index 0000000..404a1c9
--- /dev/null
+++ b/components/admin/admin-share-tab.tsx
@@ -0,0 +1,234 @@
+'use client';
+
+import type { CategoryItem, ShareLinkItem } from '@/components/admin/types';
+import { PaginationControls } from '@/components/pagination-controls';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { ErrorAlert } from '@/components/ui/error-alert';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Copy, Trash2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState, useTransition } from 'react';
+
+export function AdminShareTab({
+  shareLinks,
+  categories,
+  shareBaseUrl,
+  total,
+  page,
+  pageSize,
+}: {
+  shareLinks: ShareLinkItem[];
+  categories: Pick<CategoryItem, 'id' | 'name'>[];
+  shareBaseUrl: string;
+  total: number;
+  page: number;
+  pageSize: number;
+}) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  const [shareCategoryId, setShareCategoryId] = useState<number | null>(null);
+  const [sharePassword, setSharePassword] = useState('');
+  const [expireHours, setExpireHours] = useState('24');
+  const [shareMessage, setShareMessage] = useState<string | null>(null);
+  const [copySuccessMessage, setCopySuccessMessage] = useState<string | null>(null);
+
+  const handleShareCreate = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setShareMessage(null);
+    setError(null);
+
+    if (!shareCategoryId) {
+      setError('请选择分类');
+      return;
+    }
+
+    const response = await fetch('/api/share', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        categoryId: shareCategoryId,
+        password: sharePassword.trim() || undefined,
+        expireInHours: Number.parseInt(expireHours, 10) || undefined,
+      }),
+    });
+
+    const body = await response.json().catch(() => ({}));
+
+    if (!response.ok) {
+      setError(body.error ?? '分享链接创建失败');
+      return;
+    }
+
+    setShareMessage(`${shareBaseUrl}${body.token}`);
+    setSharePassword('');
+    setExpireHours('24');
+    startTransition(() => router.refresh());
+  };
+
+  const handleCopyShareLink = async (token: string) => {
+    const fullUrl = `${shareBaseUrl}${token}`;
+    setCopySuccessMessage(null);
+    setError(null);
+    try {
+      await navigator.clipboard.writeText(fullUrl);
+      setCopySuccessMessage('链接已复制到剪贴板');
+      setTimeout(() => setCopySuccessMessage(null), 3000);
+    } catch {
+      setError('复制失败，请手动复制链接');
+    }
+  };
+
+  const handleDeleteShareLink = async (id: number) => {
+    setError(null);
+    if (!window.confirm('确认删除该分享链接？')) {
+      return;
+    }
+
+    const response = await fetch('/api/share', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      setError(body.error ?? '删除分享链接失败');
+      return;
+    }
+
+    startTransition(() => router.refresh());
+  };
+
+  return (
+    <>
+      {error && <ErrorAlert title="操作失败" message={error} />}
+
+      <form
+        onSubmit={handleShareCreate}
+        className="bg-card grid gap-4 rounded-lg border p-4 md:grid-cols-2"
+      >
+        <div className="space-y-2">
+          <Label htmlFor="share-category">选择分类</Label>
+          <Select onValueChange={value => setShareCategoryId(Number(value))}>
+            <SelectTrigger id="share-category">
+              <SelectValue placeholder="选择需要分享的分类" />
+            </SelectTrigger>
+            <SelectContent>
+              {categories.map(category => (
+                <SelectItem key={category.id} value={String(category.id)}>
+                  {category.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="share-password">访问密码（可选）</Label>
+          <Input
+            id="share-password"
+            type="password"
+            value={sharePassword}
+            onChange={event => setSharePassword(event.target.value)}
+            placeholder="留空则不设置密码"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="share-expire">过期时间 (小时)</Label>
+          <Input
+            id="share-expire"
+            type="number"
+            min={1}
+            max={720}
+            value={expireHours}
+            onChange={event => setExpireHours(event.target.value)}
+          />
+        </div>
+        <div className="flex items-end">
+          <Button type="submit" disabled={isPending}>
+            生成分享链接
+          </Button>
+        </div>
+      </form>
+
+      {shareMessage && (
+        <Alert>
+          <AlertTitle>分享链接创建成功</AlertTitle>
+          <AlertDescription className="break-all">{shareMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      {copySuccessMessage && (
+        <Alert>
+          <AlertTitle>操作成功</AlertTitle>
+          <AlertDescription>{copySuccessMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <div className="overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>分类</TableHead>
+              <TableHead>链接</TableHead>
+              <TableHead>过期时间</TableHead>
+              <TableHead className="w-32">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {shareLinks.map(link => (
+              <TableRow key={link.id}>
+                <TableCell>{link.categoryName}</TableCell>
+                <TableCell className="text-primary text-sm break-all">
+                  {shareBaseUrl}
+                  {link.token}
+                </TableCell>
+                <TableCell>
+                  {link.expiresAt ? new Date(link.expiresAt).toLocaleString() : '不限'}
+                </TableCell>
+                <TableCell className="flex flex-wrap items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleCopyShareLink(link.token)}
+                    title="复制链接"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => handleDeleteShareLink(link.id)}
+                    title="删除链接"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PaginationControls page={page} total={total} pageSize={pageSize} />
+    </>
+  );
+}
diff --git a/components/admin/admin-shell.tsx b/components/admin/admin-shell.tsx
new file mode 100644
index 0000000..37f3dd3
--- /dev/null
+++ b/components/admin/admin-shell.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { ADMIN_TABS, type AdminTab } from '@/components/admin/types';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useQueryParamWriter } from '@/lib/query-state';
+import { LayoutDashboard } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+/**
+ * 只渲染当前 tab：页面上的每个 tab 由服务端按需取数（见 app/admin/_tab-content.tsx），
+ * 所以这里不需要、也拿不到其他 tab 的数据。
+ * value 完全由 ?tab= 决定，切换要等一次 RSC 往返，因此不会出现"标签高亮已变、内容还是旧的"。
+ */
+export function AdminShell({ tab, children }: { tab: AdminTab; children: ReactNode }) {
+  const setParam = useQueryParamWriter();
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <LayoutDashboard className="text-primary h-6 w-6" />
+          <h1 className="text-2xl font-semibold tracking-tight">控制台</h1>
+        </div>
+        <p className="text-muted-foreground text-sm">管理分类、成员以及分享链接。</p>
+      </div>
+
+      <Tabs value={tab} onValueChange={value => setParam('tab', value)}>
+        <TabsList className="grid w-full grid-cols-4">
+          {ADMIN_TABS.map(item => (
+            <TabsTrigger key={item.value} value={item.value}>
+              {item.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <TabsContent value={tab} className="space-y-6">
+          {children}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/components/admin/admin-users-tab.tsx b/components/admin/admin-users-tab.tsx
new file mode 100644
index 0000000..9a3f2f6
--- /dev/null
+++ b/components/admin/admin-users-tab.tsx
@@ -0,0 +1,486 @@
+'use client';
+
+import type { UserItem } from '@/components/admin/types';
+import { PaginationControls } from '@/components/pagination-controls';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ErrorAlert } from '@/components/ui/error-alert';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useDebouncedParam, useQueryParamWriter } from '@/lib/query-state';
+import { useRouter } from 'next/navigation';
+import { useState, useTransition } from 'react';
+
+const ROLE_ALL = '__all__';
+
+export function AdminUsersTab({
+  users,
+  pendingUsers,
+  total,
+  page,
+  pageSize,
+  query,
+  role,
+}: {
+  users: UserItem[];
+  pendingUsers: UserItem[];
+  total: number;
+  page: number;
+  pageSize: number;
+  query: string;
+  role: string;
+}) {
+  const router = useRouter();
+  const setParam = useQueryParamWriter();
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  // 输入框持有草稿，落进 URL 后由服务端筛选：不再需要"搜索"按钮
+  const [userQuery, setUserQuery] = useState(query);
+  useDebouncedParam('q', userQuery);
+
+  const [selectedUserRole, setSelectedUserRole] = useState<Record<number, string>>({});
+
+  const [deletingUserId, setDeletingUserId] = useState<number | null>(null);
+  const [deleteTransferUserId, setDeleteTransferUserId] = useState<number | null>(null);
+  const [deletePhotosDirectly, setDeletePhotosDirectly] = useState(false);
+
+  const [resettingPasswordUserId, setResettingPasswordUserId] = useState<number | null>(null);
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmNewPassword, setConfirmNewPassword] = useState('');
+
+  const allUsers = [...pendingUsers, ...users];
+  const deletingUser = allUsers.find(user => user.id === deletingUserId) ?? null;
+  const resettingUser = allUsers.find(user => user.id === resettingPasswordUserId) ?? null;
+
+  const handleUserRoleChange = async (id: number, nextRole: string) => {
+    setError(null);
+
+    const response = await fetch('/api/users', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, role: nextRole }),
+    });
+
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      setError(body.error ?? '角色更新失败');
+      return;
+    }
+
+    setSelectedUserRole(prev => {
+      const next = { ...prev };
+      delete next[id];
+      return next;
+    });
+    startTransition(() => router.refresh());
+  };
+
+  const handleUserStatusChange = async (id: number, status: 'pending' | 'active' | 'rejected') => {
+    setError(null);
+
+    const response = await fetch('/api/users', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, status }),
+    });
+
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      setError(body.error ?? '状态更新失败');
+      return;
+    }
+
+    startTransition(() => router.refresh());
+  };
+
+  const resetPasswordDialog = () => {
+    setResettingPasswordUserId(null);
+    setNewPassword('');
+    setConfirmNewPassword('');
+  };
+
+  const handlePasswordReset = async () => {
+    if (!resettingPasswordUserId) return;
+    setError(null);
+
+    if (!newPassword || !confirmNewPassword) {
+      setError('请输入新密码');
+      return;
+    }
+
+    if (newPassword !== confirmNewPassword) {
+      setError('两次输入的密码不一致');
+      return;
+    }
+
+    if (newPassword.length < 6) {
+      setError('密码至少 6 位');
+      return;
+    }
+
+    const response = await fetch('/api/users/password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ userId: resettingPasswordUserId, newPassword: newPassword }),
+    });
+
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      setError(body.error ?? '密码重置失败');
+      return;
+    }
+
+    resetPasswordDialog();
+    alert('密码重置成功');
+  };
+
+  const resetDeleteDialog = () => {
+    setDeletingUserId(null);
+    setDeleteTransferUserId(null);
+    setDeletePhotosDirectly(false);
+  };
+
+  const handleUserDelete = async () => {
+    if (!deletingUserId || !deletingUser) return;
+    setError(null);
+
+    if (deletingUser.photoCount > 0 && !deletePhotosDirectly && !deleteTransferUserId) {
+      setError('该用户有照片，请选择转移到其他用户或直接删除照片');
+      return;
+    }
+
+    const payload: { id: number; transferToUserId?: number; deletePhotos?: boolean } = {
+      id: deletingUserId,
+    };
+
+    if (deletePhotosDirectly) {
+      payload.deletePhotos = true;
+    } else if (deleteTransferUserId) {
+      payload.transferToUserId = deleteTransferUserId;
+    }
+
+    const response = await fetch('/api/users', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      setError(body.error ?? '删除用户失败');
+      return;
+    }
+
+    resetDeleteDialog();
+    startTransition(() => router.refresh());
+  };
+
+  return (
+    <>
+      {error && <ErrorAlert title="操作失败" message={error} />}
+
+      {pendingUsers.length > 0 && (
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">待审核用户</h3>
+          <div className="overflow-hidden rounded-lg border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>用户名</TableHead>
+                  <TableHead>创建时间</TableHead>
+                  <TableHead className="w-48">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {pendingUsers.map(user => (
+                  <TableRow key={user.id}>
+                    <TableCell className="font-medium">{user.username}</TableCell>
+                    <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
+                    <TableCell className="flex flex-wrap items-center gap-2">
+                      <Button
+                        variant="default"
+                        size="sm"
+                        onClick={() => handleUserStatusChange(user.id, 'active')}
+                      >
+                        通过
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => handleUserStatusChange(user.id, 'rejected')}
+                      >
+                        拒绝
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">已激活成员</h3>
+        <div className="bg-card flex flex-col gap-3 rounded-lg border p-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex items-center gap-2">
+            <Input
+              placeholder="搜索用户名"
+              value={userQuery}
+              onChange={e => setUserQuery(e.target.value)}
+              className="w-64"
+            />
+            <Select
+              value={role || ROLE_ALL}
+              onValueChange={value => setParam('role', value === ROLE_ALL ? null : value)}
+            >
+              <SelectTrigger className="h-8 w-[140px]">
+                <SelectValue placeholder="角色筛选" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ROLE_ALL}>全部角色</SelectItem>
+                <SelectItem value="admin">管理员</SelectItem>
+                <SelectItem value="member">成员</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-muted-foreground text-sm">每页</label>
+            <Select value={String(pageSize)} onValueChange={value => setParam('pageSize', value)}>
+              <SelectTrigger className="h-8 w-[100px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="20">20</SelectItem>
+                <SelectItem value="50">50</SelectItem>
+              </SelectContent>
+            </Select>
+            <div className="text-muted-foreground text-sm">共 {total} 条</div>
+          </div>
+        </div>
+        <div
+          className={
+            isPending ? 'pointer-events-none opacity-60 transition-opacity' : 'transition-opacity'
+          }
+        >
+          <div className="overflow-hidden rounded-lg border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="min-w-[180px]">用户名</TableHead>
+                  <TableHead className="min-w-[170px]">角色</TableHead>
+                  <TableHead className="min-w-[170px]">上传数</TableHead>
+                  <TableHead className="min-w-[180px]">创建时间</TableHead>
+                  <TableHead className="min-w-[380px]">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {users.map(user => (
+                  <TableRow key={user.id}>
+                    <TableCell className="font-medium">{user.username}</TableCell>
+                    <TableCell>
+                      <Badge variant={user.role === 'admin' ? 'default' : 'secondary'}>
+                        {user.role}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{user.photoCount}</TableCell>
+                    <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
+                    <TableCell className="p-0">
+                      <div className="flex items-center gap-2 px-4 py-3">
+                        <Select
+                          value={selectedUserRole[user.id] ?? user.role}
+                          onValueChange={value =>
+                            setSelectedUserRole(prev => ({
+                              ...prev,
+                              [user.id]: value,
+                            }))
+                          }
+                        >
+                          <SelectTrigger className="h-8 w-[90px]">
+                            <SelectValue placeholder="角色" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="admin">管理员</SelectItem>
+                            <SelectItem value="member">成员</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="h-8"
+                          onClick={() =>
+                            handleUserRoleChange(user.id, selectedUserRole[user.id] ?? user.role)
+                          }
+                        >
+                          保存
+                        </Button>
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          className="h-8"
+                          onClick={() => setResettingPasswordUserId(user.id)}
+                        >
+                          重置
+                        </Button>
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          className="h-8"
+                          onClick={() => setDeletingUserId(user.id)}
+                        >
+                          删除
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+        <PaginationControls page={page} total={total} pageSize={pageSize} />
+      </div>
+
+      <Dialog open={deletingUserId !== null} onOpenChange={open => !open && resetDeleteDialog()}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>删除用户</DialogTitle>
+            <DialogDescription>
+              {deletingUser?.photoCount
+                ? `该用户有 ${deletingUser.photoCount} 张照片，请选择如何处理这些照片：`
+                : '确认删除该用户？'}
+            </DialogDescription>
+          </DialogHeader>
+          {deletingUser?.photoCount ? (
+            <RadioGroup
+              value={deletePhotosDirectly ? 'delete' : deleteTransferUserId ? 'transfer' : ''}
+              onValueChange={value => {
+                if (value === 'delete') {
+                  setDeletePhotosDirectly(true);
+                  setDeleteTransferUserId(null);
+                } else {
+                  setDeletePhotosDirectly(false);
+                }
+              }}
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="delete" id="delete-photos" />
+                <Label htmlFor="delete-photos">直接删除所有照片</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="transfer" id="transfer-photos" />
+                <Label htmlFor="transfer-photos">转移到其他用户</Label>
+              </div>
+            </RadioGroup>
+          ) : null}
+          {deletingUser?.photoCount && !deletePhotosDirectly ? (
+            <div className="space-y-2">
+              <Label htmlFor="transfer-user">选择目标用户</Label>
+              <Select
+                value={deleteTransferUserId?.toString() ?? ''}
+                onValueChange={value => setDeleteTransferUserId(Number(value))}
+              >
+                <SelectTrigger id="transfer-user">
+                  <SelectValue placeholder="选择用户" />
+                </SelectTrigger>
+                <SelectContent>
+                  {users
+                    .filter(u => u.id !== deletingUserId)
+                    .map(user => (
+                      <SelectItem key={user.id} value={String(user.id)}>
+                        {user.username}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+          <DialogFooter>
+            <Button variant="ghost" onClick={resetDeleteDialog}>
+              取消
+            </Button>
+            <Button variant="destructive" onClick={handleUserDelete}>
+              确认删除
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={resettingPasswordUserId !== null}
+        onOpenChange={open => {
+          if (!open) {
+            resetPasswordDialog();
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>重置密码</DialogTitle>
+            <DialogDescription>
+              为用户 <strong>{resettingUser?.username}</strong> 设置新密码
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="new-password">新密码</Label>
+              <Input
+                id="new-password"
+                type="password"
+                value={newPassword}
+                onChange={e => setNewPassword(e.target.value)}
+                placeholder="至少 6 位"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="confirm-new-password">确认新密码</Label>
+              <Input
+                id="confirm-new-password"
+                type="password"
+                value={confirmNewPassword}
+                onChange={e => setConfirmNewPassword(e.target.value)}
+                placeholder="再次输入新密码"
+                required
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="ghost" onClick={resetPasswordDialog}>
+              取消
+            </Button>
+            <Button variant="default" onClick={handlePasswordReset}>
+              确认重置
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/components/admin/types.ts b/components/admin/types.ts
new file mode 100644
index 0000000..986e43a
--- /dev/null
+++ b/components/admin/types.ts
@@ -0,0 +1,44 @@
+export type AdminTab = 'categories' | 'filesets' | 'users' | 'share';
+
+export const ADMIN_TABS: Array<{ value: AdminTab; label: string }> = [
+  { value: 'categories', label: '相册' },
+  { value: 'filesets', label: '文件' },
+  { value: 'users', label: '成员' },
+  { value: 'share', label: '分享' },
+];
+
+export interface CategoryItem {
+  id: number;
+  name: string;
+  description: string | null;
+  photoCount: number;
+  createdAt: string;
+  visibility: 'private' | 'internal' | 'public';
+}
+
+export interface UserItem {
+  id: number;
+  username: string;
+  role: string;
+  status: 'pending' | 'active' | 'rejected';
+  photoCount: number;
+  createdAt: string;
+}
+
+export interface ShareLinkItem {
+  id: number;
+  token: string;
+  categoryId: number;
+  categoryName: string;
+  expiresAt: string | null;
+  createdAt: string;
+}
+
+export interface FileSetItem {
+  id: number;
+  name: string;
+  description: string | null;
+  visibility: 'private' | 'internal' | 'public';
+  fileCount: number;
+  createdAt: string;
+}
diff --git a/components/error-state.tsx b/components/error-state.tsx
new file mode 100644
index 0000000..da27ebd
--- /dev/null
+++ b/components/error-state.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, ArrowLeft, Home, RotateCcw } from 'lucide-react';
+import Link from 'next/link';
+
+export function ErrorState({
+  title = '出了点问题',
+  description = '页面加载失败，请重试。',
+  detail,
+  reset,
+}: {
+  title?: string;
+  description?: string;
+  detail?: string;
+  reset?: () => void;
+}) {
+  return (
+    <div className="flex min-h-[calc(100vh-8rem)] items-center justify-center px-4">
+      <div className="max-w-md space-y-6 text-center">
+        <div className="flex justify-center">
+          <div className="bg-destructive/10 rounded-full p-6">
+            <AlertTriangle className="text-destructive h-16 w-16" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-foreground text-2xl font-semibold tracking-tight">{title}</h1>
+          <p className="text-muted-foreground">{description}</p>
+          {detail ? (
+            <p className="text-muted-foreground font-mono text-xs break-all">{detail}</p>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
+          {reset ? (
+            <Button onClick={reset}>
+              <RotateCcw className="h-4 w-4" />
+              重试
+            </Button>
+          ) : null}
+          <Button asChild variant="outline">
+            <Link href="/">
+              <Home className="h-4 w-4" />
+              返回首页
+            </Link>
+          </Button>
+          <Button asChild variant="ghost">
+            <Link href="/help">
+              <ArrowLeft className="h-4 w-4" />
+              帮助中心
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/file-manager.tsx b/components/file-manager.tsx
deleted file mode 100644
index 4507790..0000000
--- a/components/file-manager.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-'use client';
-
-import { FilesPreviewDialog } from '@/components/files/preview-dialog';
-import { FilesSidebar } from '@/components/files/sidebar';
-import { FilesTable } from '@/components/files/table';
-import { FilesToolbar } from '@/components/files/toolbar';
-import type { FileItem, FileSet } from '@/components/files/types';
-import { FilesUploadDialog } from '@/components/files/upload-dialog';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { FileIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
-
-export function FileManager() {
-  const [fileSets, setFileSets] = useState<FileSet[]>([]);
-  const [activeFileSetId, setActiveFileSetId] = useState<number | null>(null);
-  const [files, setFiles] = useState<FileItem[]>([]);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [debouncedQuery, setDebouncedQuery] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [showUpload, setShowUpload] = useState(false);
-  const [previewFile, setPreviewFile] = useState<FileItem | null>(null);
-
-  // Load filesets on mount
-  useEffect(() => {
-    loadFileSets();
-  }, []);
-
-  // Debounce search input
-  useEffect(() => {
-    const handle = setTimeout(() => setDebouncedQuery(searchQuery), 300);
-    return () => clearTimeout(handle);
-  }, [searchQuery]);
-
-  // Load files when fileset or query changes
-  useEffect(() => {
-    if (activeFileSetId) {
-      loadFiles();
-    }
-  }, [activeFileSetId, debouncedQuery]);
-
-  async function loadFileSets() {
-    try {
-      setLoading(true);
-      const res = await fetch('/api/filesets');
-      const json = await res.json();
-      setFileSets(json.items ?? []);
-      if (json.items?.length && !activeFileSetId) {
-        setActiveFileSetId(json.items[0].id);
-      }
-    } catch (e) {
-      setError('加载文件分类失败');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function loadFiles() {
-    if (!activeFileSetId) return;
-    try {
-      setLoading(true);
-      const params = new URLSearchParams({
-        filesetId: String(activeFileSetId),
-      });
-      if (debouncedQuery) params.set('q', debouncedQuery);
-
-      const res = await fetch(`/api/files?${params.toString()}`);
-      const json = await res.json();
-      setFiles(json.items ?? []);
-      setError(null);
-    } catch (e) {
-      setError('加载文件列表失败');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleUpload(file: File) {
-    if (!activeFileSetId) {
-      setError('请先选择文件分类');
-      return;
-    }
-
-    try {
-      setLoading(true);
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('filesetId', String(activeFileSetId));
-
-      const res = await fetch('/api/files', {
-        method: 'POST',
-        body: formData,
-      });
-
-      if (!res.ok) {
-        const json = await res.json().catch(() => ({}));
-        throw new Error(json?.message || '上传失败');
-      }
-
-      await loadFiles();
-      setShowUpload(false);
-      setError(null);
-    } catch (e: any) {
-      setError(e?.message || '上传失败');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleDelete(fileId: number) {
-    if (!confirm('确定要删除此文件吗？')) return;
-
-    try {
-      setLoading(true);
-      const res = await fetch(`/api/files/${fileId}`, {
-        method: 'DELETE',
-      });
-
-      if (!res.ok) {
-        const json = await res.json().catch(() => ({}));
-        throw new Error(json?.message || '删除失败');
-      }
-
-      await loadFiles();
-      setError(null);
-    } catch (e: any) {
-      setError(e?.message || '删除失败');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  function formatFileSize(bytes: number): string {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-  }
-
-  const activeFileSet = fileSets.find(fs => fs.id === activeFileSetId);
-
-  return (
-    <div className="space-y-6">
-      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <div className="flex flex-col gap-2">
-          <div className="text-foreground flex items-center gap-2">
-            <FileIcon className="text-primary h-5 w-5" />
-            <h1 className="text-2xl font-semibold tracking-tight">文件管理</h1>
-          </div>
-          {/* Removed header file count badge per request */}
-        </div>
-        <FilesToolbar
-          searchQuery={searchQuery}
-          onSearchChange={setSearchQuery}
-          onUploadClick={() => setShowUpload(true)}
-        />
-      </div>
-
-      {error && (
-        <Alert variant="destructive">
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      <div className="flex gap-4 md:gap-8">
-        <FilesSidebar
-          fileSets={fileSets}
-          activeFileSetId={activeFileSetId}
-          onSelect={setActiveFileSetId}
-        />
-
-        {/* File list */}
-        <section className="min-w-0 flex-1">
-          {activeFileSet && (
-            <div className="mb-3">
-              <h2 className="text-lg font-medium">{activeFileSet.name}</h2>
-              {activeFileSet.description && (
-                <p className="text-muted-foreground text-sm">{activeFileSet.description}</p>
-              )}
-            </div>
-          )}
-
-          <FilesTable
-            files={files}
-            loading={loading}
-            error={error}
-            onPreview={setPreviewFile}
-            onDelete={handleDelete}
-          />
-        </section>
-      </div>
-
-      <FilesUploadDialog
-        open={showUpload}
-        onClose={() => setShowUpload(false)}
-        onUpload={handleUpload}
-      />
-      <FilesPreviewDialog file={previewFile} onClose={() => setPreviewFile(null)} />
-    </div>
-  );
-}
diff --git a/components/files/sidebar.tsx b/components/files/sidebar.tsx
index dc409cf..46caf9b 100644
--- a/components/files/sidebar.tsx
+++ b/components/files/sidebar.tsx
@@ -1,16 +1,19 @@
 'use client';
 
-import { FileSet } from './types';
+import { useQueryParamWriter } from '@/lib/query-state';
+import { cn } from '@/lib/utils';
+
+import type { FileSet } from './types';
 
 export function FilesSidebar({
   fileSets,
   activeFileSetId,
-  onSelect,
 }: {
   fileSets: FileSet[];
   activeFileSetId: number | null;
-  onSelect: (id: number) => void;
 }) {
+  const setParam = useQueryParamWriter();
+
   return (
     <aside className="hidden w-64 shrink-0 md:block">
       <div className="rounded-md border p-3">
@@ -19,12 +22,13 @@ export function FilesSidebar({
           {fileSets.map(fs => (
             <button
               key={fs.id}
-              className={`hover:bg-muted w-full rounded px-3 py-2 text-left text-sm transition-colors ${
-                activeFileSetId === fs.id ? 'bg-muted font-medium' : ''
-              }`}
-              onClick={() => onSelect(fs.id)}
+              className={cn(
+                'hover:bg-muted w-full rounded px-3 py-2 text-left text-sm transition-colors',
+                activeFileSetId === fs.id && 'bg-muted font-medium'
+              )}
+              onClick={() => setParam('fileset', String(fs.id))}
             >
-              <div className="justify之间 flex items-center">
+              <div className="flex items-center justify-between">
                 <span className="truncate">{fs.name}</span>
                 <span className="text-muted-foreground text-xs">{fs.fileCount}</span>
               </div>
diff --git a/components/files/table.tsx b/components/files/table.tsx
index 0542337..7871684 100644
--- a/components/files/table.tsx
+++ b/components/files/table.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { FilesPreviewDialog } from '@/components/files/preview-dialog';
 import { Button } from '@/components/ui/button';
+import { ErrorAlert } from '@/components/ui/error-alert';
 import {
   Table,
   TableBody,
@@ -10,6 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { cn } from '@/lib/utils';
 import {
   Archive,
   Code,
@@ -22,114 +24,137 @@ import {
   Trash2,
   Video,
 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState, useTransition } from 'react';
 
 import { FileItem, formatFileSize } from './types';
 
-export function FilesTable({
-  files,
-  loading,
-  error,
-  onPreview,
-  onDelete,
-}: {
-  files: FileItem[];
-  loading: boolean;
-  error: string | null;
-  onPreview: (file: FileItem) => void;
-  onDelete: (id: number) => void;
-}) {
-  function renderTypeIcon(mime: string) {
-    const cls = 'h-4 w-4 text-muted-foreground';
-    if (mime.startsWith('image/')) return <ImageIcon className={cls} />;
-    if (mime.startsWith('video/')) return <Video className={cls} />;
-    if (mime.startsWith('audio/')) return <Music className={cls} />;
-    if (mime === 'application/pdf') return <FileText className={cls} />;
-    if (/zip|tar|rar/.test(mime)) return <Archive className={cls} />;
-    if (mime.startsWith('text/') || /json|xml|yaml|javascript/.test(mime))
-      return <Code className={cls} />;
-    return <FileIcon className={cls} />;
+function renderTypeIcon(mime: string) {
+  const cls = 'h-4 w-4 text-muted-foreground';
+  if (mime.startsWith('image/')) return <ImageIcon className={cls} />;
+  if (mime.startsWith('video/')) return <Video className={cls} />;
+  if (mime.startsWith('audio/')) return <Music className={cls} />;
+  if (mime === 'application/pdf') return <FileText className={cls} />;
+  if (/zip|tar|rar/.test(mime)) return <Archive className={cls} />;
+  if (mime.startsWith('text/') || /json|xml|yaml|javascript/.test(mime))
+    return <Code className={cls} />;
+  return <FileIcon className={cls} />;
+}
+
+export function FilesTable({ files }: { files: FileItem[] }) {
+  const router = useRouter();
+  const [previewFile, setPreviewFile] = useState<FileItem | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  async function handleDelete(fileId: number) {
+    if (!confirm('确定要删除此文件吗？')) return;
+
+    try {
+      const res = await fetch(`/api/files/${fileId}`, { method: 'DELETE' });
+      if (!res.ok) {
+        const json = await res.json().catch(() => ({}));
+        throw new Error(json?.message || '删除失败');
+      }
+      setError(null);
+      startTransition(() => router.refresh());
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '删除失败');
+    }
   }
 
   return (
-    <div className="overflow-x-auto rounded-md border">
-      {error && (
-        <Alert variant="destructive">
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead className="min-w-[220px]">文件名</TableHead>
-            <TableHead className="w-28">类型</TableHead>
-            <TableHead className="w-24">大小</TableHead>
-            <TableHead className="w-32">上传时间</TableHead>
-            <TableHead className="w-32">操作</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {files.length === 0 ? (
+    <div className="space-y-3">
+      {error && <ErrorAlert message={error} />}
+      <div
+        className={cn(
+          'overflow-x-auto rounded-md border transition-opacity',
+          isPending && 'pointer-events-none opacity-60'
+        )}
+      >
+        <Table>
+          <TableHeader>
             <TableRow>
-              <TableCell colSpan={5} className="text-muted-foreground h-24 text-center">
-                {loading ? '加载中...' : '暂无文件'}
-              </TableCell>
+              <TableHead className="min-w-[220px]">文件名</TableHead>
+              <TableHead className="w-28">类型</TableHead>
+              <TableHead className="w-24">大小</TableHead>
+              <TableHead className="w-32">上传时间</TableHead>
+              <TableHead className="w-32">操作</TableHead>
             </TableRow>
-          ) : (
-            files.map(file => (
-              <TableRow key={file.id}>
-                <TableCell>
-                  <div className="flex items-center gap-2">
-                    {renderTypeIcon(file.mimeType)}
-                    <div className="flex min-w-0 flex-col">
-                      <span className="max-w-[40ch] truncate font-medium" title={file.originalName}>
-                        {file.originalName}
-                      </span>
-                      {file.description && (
-                        <span className="text-muted-foreground text-xs">{file.description}</span>
-                      )}
-                    </div>
-                  </div>
-                </TableCell>
-                <TableCell className="text-muted-foreground text-sm">
-                  <span className="inline-block max-w-[10ch] truncate" title={file.mimeType}>
-                    {file.mimeType.split('/')[1]?.toUpperCase() || 'FILE'}
-                  </span>
-                </TableCell>
-                <TableCell className="text-sm">{formatFileSize(file.size)}</TableCell>
-                <TableCell className="text-muted-foreground text-sm">
-                  {new Date(file.createdAt).toLocaleDateString()}
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center gap-1">
-                    <Button variant="ghost" size="sm" title="预览" onClick={() => onPreview(file)}>
-                      <Eye className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      title="下载/打开"
-                      onClick={e => {
-                        e.stopPropagation();
-                        window.open(file.url, '_blank');
-                      }}
-                    >
-                      <Download className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      title="删除"
-                      onClick={() => onDelete(file.id)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
+          </TableHeader>
+          <TableBody>
+            {files.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-muted-foreground h-24 text-center">
+                  暂无文件
                 </TableCell>
               </TableRow>
-            ))
-          )}
-        </TableBody>
-      </Table>
+            ) : (
+              files.map(file => (
+                <TableRow key={file.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      {renderTypeIcon(file.mimeType)}
+                      <div className="flex min-w-0 flex-col">
+                        <span
+                          className="max-w-[40ch] truncate font-medium"
+                          title={file.originalName}
+                        >
+                          {file.originalName}
+                        </span>
+                        {file.description && (
+                          <span className="text-muted-foreground text-xs">{file.description}</span>
+                        )}
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground text-sm">
+                    <span className="inline-block max-w-[10ch] truncate" title={file.mimeType}>
+                      {file.mimeType.split('/')[1]?.toUpperCase() || 'FILE'}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-sm">{formatFileSize(file.size)}</TableCell>
+                  <TableCell className="text-muted-foreground text-sm">
+                    {new Date(file.createdAt).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        title="预览"
+                        onClick={() => setPreviewFile(file)}
+                      >
+                        <Eye className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        title="下载/打开"
+                        onClick={e => {
+                          e.stopPropagation();
+                          window.open(file.url, '_blank');
+                        }}
+                      >
+                        <Download className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        title="删除"
+                        onClick={() => handleDelete(file.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <FilesPreviewDialog file={previewFile} onClose={() => setPreviewFile(null)} />
     </div>
   );
 }
diff --git a/components/files/toolbar.tsx b/components/files/toolbar.tsx
index 39aab38..87bba24 100644
--- a/components/files/toolbar.tsx
+++ b/components/files/toolbar.tsx
@@ -1,33 +1,78 @@
 'use client';
 
+import { FilesUploadDialog } from '@/components/files/upload-dialog';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { useDebouncedParam } from '@/lib/query-state';
 import { Search, Upload } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 export function FilesToolbar({
-  searchQuery,
-  onSearchChange,
-  onUploadClick,
+  initialQuery,
+  activeFileSetId,
 }: {
-  searchQuery: string;
-  onSearchChange: (value: string) => void;
-  onUploadClick: () => void;
+  initialQuery: string;
+  activeFileSetId: number | null;
 }) {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState(initialQuery);
+  const [showUpload, setShowUpload] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  useDebouncedParam('q', searchQuery);
+
+  async function handleUpload(file: File) {
+    if (activeFileSetId === null) {
+      setUploadError('请先选择文件分类');
+      return;
+    }
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('filesetId', String(activeFileSetId));
+
+      const res = await fetch('/api/files', { method: 'POST', body: formData });
+      if (!res.ok) {
+        const json = await res.json().catch(() => ({}));
+        throw new Error(json?.message || '上传失败');
+      }
+
+      setUploadError(null);
+      setShowUpload(false);
+      router.refresh();
+    } catch (e) {
+      setUploadError(e instanceof Error ? e.message : '上传失败');
+    }
+  }
+
   return (
-    <div className="flex items-center gap-2">
-      <div className="relative">
-        <Search className="text-muted-foreground absolute top-2.5 left-2 h-4 w-4" />
-        <Input
-          placeholder="搜索文件..."
-          value={searchQuery}
-          onChange={e => onSearchChange(e.target.value)}
-          className="w-64 pl-8"
-        />
+    <>
+      <div className="flex items-center gap-2">
+        <div className="relative">
+          <Search className="text-muted-foreground absolute top-2.5 left-2 h-4 w-4" />
+          <Input
+            placeholder="搜索文件..."
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            className="w-64 pl-8"
+          />
+        </div>
+        <Button onClick={() => setShowUpload(true)} variant="outline" size="sm">
+          <Upload className="mr-2 h-4 w-4" />
+          上传文件
+        </Button>
       </div>
-      <Button onClick={onUploadClick} variant="outline" size="sm">
-        <Upload className="mr-2 h-4 w-4" />
-        上传文件
-      </Button>
-    </div>
+      <FilesUploadDialog
+        open={showUpload}
+        error={uploadError}
+        onClose={() => {
+          setShowUpload(false);
+          setUploadError(null);
+        }}
+        onUpload={handleUpload}
+      />
+    </>
   );
 }
diff --git a/components/files/types.ts b/components/files/types.ts
index 6365697..d442533 100644
--- a/components/files/types.ts
+++ b/components/files/types.ts
@@ -2,7 +2,6 @@ export type FileSet = {
   id: number;
   name: string;
   description: string | null;
-  visibility: string;
   fileCount: number;
 };
 
diff --git a/components/files/upload-dialog.tsx b/components/files/upload-dialog.tsx
index 0f59e67..83bc84f 100644
--- a/components/files/upload-dialog.tsx
+++ b/components/files/upload-dialog.tsx
@@ -9,6 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { ErrorAlert } from '@/components/ui/error-alert';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useState } from 'react';
@@ -17,10 +18,12 @@ export function FilesUploadDialog({
   open,
   onClose,
   onUpload,
+  error,
 }: {
   open: boolean;
   onClose: () => void;
   onUpload: (file: File) => Promise<void>;
+  error?: string | null;
 }) {
   const [file, setFile] = useState<File | null>(null);
   const [uploading, setUploading] = useState(false);
@@ -52,6 +55,7 @@ export function FilesUploadDialog({
               disabled={uploading}
             />
           </div>
+          {error ? <ErrorAlert message={error} /> : null}
         </div>
         <DialogFooter>
           <Button variant="outline" onClick={onClose} disabled={uploading}>
diff --git a/components/login-form.tsx b/components/login-form.tsx
index ce826b8..bdc6b27 100644
--- a/components/login-form.tsx
+++ b/components/login-form.tsx
@@ -2,6 +2,7 @@
 
 import { LoadingButton } from '@/components/loading-button';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { ErrorAlert } from '@/components/ui/error-alert';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { signIn } from 'next-auth/react';
@@ -89,12 +90,7 @@ export function LoginForm({ onSuccess }: { onSuccess?: () => void } = {}) {
           required
         />
       </div>
-      {error && (
-        <Alert variant="destructive">
-          <AlertTitle>登录失败</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
+      {error && <ErrorAlert title="登录失败" message={error} />}
       {pendingHint && (
         <Alert>
           <AlertTitle>登录受限</AlertTitle>
diff --git a/components/pagination-controls.tsx b/components/pagination-controls.tsx
new file mode 100644
index 0000000..da4d5f6
--- /dev/null
+++ b/components/pagination-controls.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { useQueryParamWriter } from '@/lib/query-state';
+
+/**
+ * 页窗口分页器，写入 ?p=。标记沿用控制台原有的"第 N 页 / 共 M 页"样式。
+ */
+export function PaginationControls({
+  page,
+  total,
+  pageSize,
+}: {
+  page: number;
+  total: number;
+  pageSize: number;
+}) {
+  const setParam = useQueryParamWriter();
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+
+  if (pageCount <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="text-muted-foreground text-sm">
+        第 {page} 页 / 共 {pageCount} 页 · {total} 条
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={page <= 1}
+          onClick={() => setParam('p', String(Math.max(page - 1, 1)))}
+        >
+          上一页
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={page >= pageCount}
+          onClick={() => setParam('p', String(Math.min(page + 1, pageCount)))}
+        >
+          下一页
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/photo-grid.tsx b/components/photo-grid.tsx
index f29aade..1a24db7 100644
--- a/components/photo-grid.tsx
+++ b/components/photo-grid.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -10,6 +9,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { ErrorAlert } from '@/components/ui/error-alert';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -20,13 +20,14 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { useShallowIdParam, useShallowParam } from '@/lib/query-state';
 import { cn } from '@/lib/utils';
 import { format } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
 import { Play } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import { Fragment, useCallback, useMemo, useState } from 'react';
+import { Fragment, useCallback, useMemo, useState, useTransition } from 'react';
 
 interface PhotoItem {
   id: number;
@@ -55,15 +56,30 @@ export function PhotoGrid({
   downloadStrategy = 'api',
 }: PhotoGridProps) {
   const router = useRouter();
-  const [activePhoto, setActivePhoto] = useState<PhotoItem | null>(null);
+  // router.refresh() 本身没有视觉反馈，用一次 transition 让列表在刷新时变暗
+  const [isPending, startTransition] = useTransition();
+  // 灯箱由 ?photo= 驱动：打开时 pushState，浏览器返回键先关灯箱而不离开页面
+  const [activePhotoId, setActivePhotoId] = useShallowIdParam('photo');
+  const activePhoto = useMemo(
+    () => photos.find(photo => String(photo.id) === activePhotoId) ?? null,
+    [photos, activePhotoId]
+  );
   const [selectionMode, setSelectionMode] = useState(false);
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
   const [isProcessing, setIsProcessing] = useState(false);
   const [actionError, setActionError] = useState<string | null>(null);
   const [renameOpen, setRenameOpen] = useState(false);
   const [renameValue, setRenameValue] = useState('');
-  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
-  const [zoomLevel, setZoomLevel] = useState<'day' | 'month' | 'year'>('day');
+  const [viewMode, setViewMode] = useShallowParam<'grid' | 'list'>(
+    'view',
+    ['grid', 'list'],
+    'grid'
+  );
+  const [zoomLevel, setZoomLevel] = useShallowParam<'day' | 'month' | 'year'>(
+    'group',
+    ['day', 'month', 'year'],
+    'day'
+  );
   const [pinchDistance, setPinchDistance] = useState<number | null>(null);
 
   const groups = useMemo(() => {
@@ -167,7 +183,7 @@ export function PhotoGrid({
         throw new Error(payload.error ?? '删除失败');
       }
       clearSelection();
-      router.refresh();
+      startTransition(() => router.refresh());
     } catch (error) {
       const message = error instanceof Error ? error.message : '删除失败';
       setActionError(message);
@@ -212,7 +228,7 @@ export function PhotoGrid({
       }
       setRenameOpen(false);
       clearSelection();
-      router.refresh();
+      startTransition(() => router.refresh());
     } catch (error) {
       const message = error instanceof Error ? error.message : '重命名失败';
       setActionError(message);
@@ -273,10 +289,10 @@ export function PhotoGrid({
       if (selectionMode) {
         toggleSelection(photo.id);
       } else {
-        setActivePhoto(photo);
+        setActivePhotoId(String(photo.id));
       }
     },
-    [selectionMode, toggleSelection]
+    [selectionMode, toggleSelection, setActivePhotoId]
   );
 
   const handleCopyLink = useCallback((photo: PhotoItem) => {
@@ -291,7 +307,7 @@ export function PhotoGrid({
       if (prev === 'month') return 'day';
       return 'day';
     });
-  }, []);
+  }, [setZoomLevel]);
 
   const handleZoomOut = useCallback(() => {
     setZoomLevel(prev => {
@@ -299,7 +315,7 @@ export function PhotoGrid({
       if (prev === 'month') return 'year';
       return 'year';
     });
-  }, []);
+  }, [setZoomLevel]);
 
   const handleWheel = useCallback(
     (event: React.WheelEvent) => {
@@ -471,12 +487,7 @@ export function PhotoGrid({
         </div>
       </div>
 
-      {actionError ? (
-        <Alert variant="destructive" className="mb-4">
-          <AlertTitle>操作失败</AlertTitle>
-          <AlertDescription>{actionError}</AlertDescription>
-        </Alert>
-      ) : null}
+      {actionError ? <ErrorAlert title="操作失败" message={actionError} className="mb-4" /> : null}
 
       {selectionMode && selectedCount > 0 ? (
         <div className="mb-4 flex flex-wrap items-center gap-3">
@@ -516,7 +527,10 @@ export function PhotoGrid({
 
       {viewMode === 'grid' ? (
         <div
-          className="space-y-6"
+          className={cn(
+            'space-y-6',
+            isPending && 'pointer-events-none opacity-60 transition-opacity'
+          )}
           onWheel={handleWheel}
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
@@ -638,7 +652,12 @@ export function PhotoGrid({
           ))}
         </div>
       ) : (
-        <div className="overflow-hidden rounded-lg border">
+        <div
+          className={cn(
+            'overflow-hidden rounded-lg border',
+            isPending && 'pointer-events-none opacity-60 transition-opacity'
+          )}
+        >
           <Table>
             <TableHeader>
               <TableRow>
@@ -773,7 +792,7 @@ export function PhotoGrid({
         open={!!activePhoto}
         onOpenChange={open => {
           if (!open) {
-            setActivePhoto(null);
+            setActivePhotoId(null);
           }
         }}
       >
@@ -792,7 +811,7 @@ export function PhotoGrid({
                 <Button
                   variant="ghost"
                   className="text-white hover:text-white"
-                  onClick={() => setActivePhoto(null)}
+                  onClick={() => setActivePhotoId(null)}
                 >
                   关闭
                 </Button>
diff --git a/components/photo-page.tsx b/components/photo-page.tsx
new file mode 100644
index 0000000..bcac51f
--- /dev/null
+++ b/components/photo-page.tsx
@@ -0,0 +1,102 @@
+import { PaginationControls } from '@/components/pagination-controls';
+import { PhotoGrid } from '@/components/photo-grid';
+import { EmptyState } from '@/components/ui/empty-state';
+import { prisma } from '@/lib/db';
+import { getPublicObjectUrl, getPublicThumbnailUrl } from '@/lib/storage';
+
+/** 日/月/年三档缩放共用一个页大小：年视图 8 列时 24 张会显得太空 */
+export const PHOTO_PAGE_SIZE = 60;
+
+type PhotoRecord = {
+  id: number;
+  filename: string;
+  originalName: string;
+  description: string | null;
+  categoryId: number;
+  uploaderId: number;
+  mediaType: 'image' | 'video';
+  createdAt: Date;
+  uploader: { username: string };
+};
+
+function toItem(photo: PhotoRecord, viewerId: number | null) {
+  return {
+    id: photo.id,
+    filename: photo.filename,
+    originalName: photo.originalName,
+    description: photo.description,
+    createdAt: photo.createdAt.toISOString(),
+    uploader: photo.uploader.username,
+    mediaType: photo.mediaType,
+    thumbnailUrl: photo.mediaType === 'image' ? getPublicThumbnailUrl(photo.filename) : null,
+    fileUrl: getPublicObjectUrl(photo.filename),
+    isOwner: viewerId !== null && photo.uploaderId === viewerId,
+  };
+}
+
+/**
+ * 一窗媒体 + 分页器。相册页与分享页共用，差别只在 access 与 downloadStrategy：
+ * 分享页是匿名访问，因此传 viewerId=null、canManageAll=false、downloadStrategy='public'。
+ */
+export async function PhotoPage({
+  categoryId,
+  sort,
+  page,
+  total,
+  deepPhotoId,
+  viewerId,
+  canManageAll,
+  downloadStrategy,
+  emptyTitle,
+}: {
+  categoryId: number;
+  sort: 'asc' | 'desc';
+  page: number;
+  total: number;
+  deepPhotoId: number | null;
+  viewerId: number | null;
+  canManageAll: boolean;
+  downloadStrategy: 'api' | 'public';
+  emptyTitle: string;
+}) {
+  const rows = (await prisma.photo.findMany({
+    where: { categoryId },
+    orderBy: { createdAt: sort },
+    skip: (page - 1) * PHOTO_PAGE_SIZE,
+    take: PHOTO_PAGE_SIZE,
+    include: { uploader: { select: { username: true } } },
+  })) as PhotoRecord[];
+
+  const photos = rows.map(row => toItem(row, viewerId));
+
+  if (deepPhotoId !== null && !photos.some(photo => photo.id === deepPhotoId)) {
+    const deep = (await prisma.photo.findUnique({
+      where: { id: deepPhotoId },
+      include: { uploader: { select: { username: true } } },
+    })) as PhotoRecord | null;
+
+    // 只接受确实属于本相册的照片，否则 ?photo= 就成了跨相册窥探的入口
+    if (deep && deep.categoryId === categoryId) {
+      photos.push(toItem(deep, viewerId));
+    }
+  }
+
+  if (photos.length === 0) {
+    return <EmptyState title={emptyTitle} />;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* key 随页码变化会重挂载网格，于是翻页会清空选择集；
+          view/group/photo 存在 URL 里，因此不受重挂载影响 */}
+      <PhotoGrid
+        key={`page-${page}`}
+        photos={photos}
+        canManageAll={canManageAll}
+        allowOwnActions={viewerId !== null}
+        downloadStrategy={downloadStrategy}
+      />
+      <PaginationControls page={page} total={total} pageSize={PHOTO_PAGE_SIZE} />
+    </div>
+  );
+}
diff --git a/components/profile/account-forms.tsx b/components/profile/account-forms.tsx
index 2f7421b..bd1770d 100644
--- a/components/profile/account-forms.tsx
+++ b/components/profile/account-forms.tsx
@@ -3,6 +3,7 @@
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { ErrorAlert } from '@/components/ui/error-alert';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useRouter } from 'next/navigation';
@@ -116,12 +117,7 @@ function UpdateUsernameForm({ defaultUsername }: { defaultUsername: string }) {
               <AlertDescription>{message}</AlertDescription>
             </Alert>
           )}
-          {error && (
-            <Alert variant="destructive">
-              <AlertTitle>修改失败</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
+          {error && <ErrorAlert title="修改失败" message={error} />}
           <Button type="submit" disabled={isPending}>
             {isPending ? '保存中...' : '保存'}
           </Button>
@@ -227,12 +223,7 @@ function UpdatePasswordForm() {
               <AlertDescription>{message}</AlertDescription>
             </Alert>
           )}
-          {error && (
-            <Alert variant="destructive">
-              <AlertTitle>修改失败</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
+          {error && <ErrorAlert title="修改失败" message={error} />}
           <Button type="submit" disabled={isPending}>
             {isPending ? '保存中...' : '保存'}
           </Button>
diff --git a/components/register-form.tsx b/components/register-form.tsx
index fd74d57..07cbaf3 100644
--- a/components/register-form.tsx
+++ b/components/register-form.tsx
@@ -2,6 +2,7 @@
 
 import { LoadingButton } from '@/components/loading-button';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { ErrorAlert } from '@/components/ui/error-alert';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { FormEvent, useState } from 'react';
@@ -103,12 +104,7 @@ export function RegisterForm({
           <AlertDescription>{message}</AlertDescription>
         </Alert>
       )}
-      {error && (
-        <Alert variant="destructive">
-          <AlertTitle>注册失败</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
+      {error && <ErrorAlert title="注册失败" message={error} />}
       <LoadingButton type="submit" className="w-full" loading={isSubmitting}>
         注册
       </LoadingButton>
diff --git a/components/search-dialog.tsx b/components/search-dialog.tsx
index 274b8d9..99e8704 100644
--- a/components/search-dialog.tsx
+++ b/components/search-dialog.tsx
@@ -2,6 +2,7 @@
 
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { EmptyState } from '@/components/ui/empty-state';
 import { Input } from '@/components/ui/input';
 import {
   Table,
@@ -130,7 +131,7 @@ export function SearchDialog({ open, onOpenChange, categoryId }: SearchDialogPro
           {loading && <p className="text-muted-foreground text-sm">搜索中...</p>}
           {error && <p className="text-destructive text-sm">{error}</p>}
           {!loading && !error && !hasResults && debounced && (
-            <p className="text-muted-foreground text-sm">没有匹配结果</p>
+            <EmptyState className="p-6" title="没有匹配结果" />
           )}
 
           {results.categories.length > 0 && (
diff --git a/components/share-password-form.tsx b/components/share-password-form.tsx
new file mode 100644
index 0000000..790c141
--- /dev/null
+++ b/components/share-password-form.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useRouter } from 'next/navigation';
+import { FormEvent, useState } from 'react';
+
+export function SharePasswordForm({ token }: { token: string }) {
+  const router = useRouter();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitting(true);
+    try {
+      const response = await fetch('/api/share/unlock', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        throw new Error(payload?.error ?? '验证失败');
+      }
+      setError(null);
+      setPassword('');
+      // 解锁凭证写在 httpOnly cookie 里，因此由服务端重渲染来取内容
+      router.refresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '验证失败');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="share-password">访问密码</Label>
+        <Input
+          id="share-password"
+          type="password"
+          value={password}
+          onChange={event => setPassword(event.target.value)}
+          placeholder="请输入访问密码"
+          required
+          autoComplete="off"
+        />
+      </div>
+      <Button type="submit" className="w-full" disabled={submitting}>
+        {submitting ? '验证中...' : '提交'}
+      </Button>
+      {error ? <p className="text-destructive text-xs">{error}</p> : null}
+    </form>
+  );
+}
diff --git a/components/share-viewer.tsx b/components/share-viewer.tsx
deleted file mode 100644
index 1640d3c..0000000
--- a/components/share-viewer.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-'use client';
-
-import { PhotoGrid } from '@/components/photo-grid';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { FormEvent, useEffect, useState } from 'react';
-
-interface ShareViewerProps {
-  token: string;
-}
-
-interface ShareResponse {
-  token: string;
-  expiresAt: string | null;
-  category: {
-    id: number;
-    name: string;
-    description: string | null;
-    photos: Array<{
-      id: number;
-      filename: string;
-      originalName: string | null;
-      description: string | null;
-      createdAt: string;
-      uploader: string;
-      thumbnailUrl: string | null;
-      mediaType: 'image' | 'video';
-      fileUrl: string;
-      mimeType: string;
-    }>;
-  };
-}
-
-export function ShareViewer({ token }: ShareViewerProps) {
-  const [data, setData] = useState<ShareResponse | null>(null);
-  const [status, setStatus] = useState<'loading' | 'password' | 'error' | 'success'>('loading');
-  const [error, setError] = useState<string | null>(null);
-  const [password, setPassword] = useState('');
-  const [attempts, setAttempts] = useState(0);
-
-  const requestShare = async (options?: { password?: string }) => {
-    setError(null);
-    setStatus('loading');
-    const params = new URLSearchParams({ token });
-    if (options?.password) {
-      params.set('password', options.password);
-    }
-    const response = await fetch(`/api/share?${params.toString()}`);
-    const payload = await response.json().catch(() => ({}));
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        setStatus('password');
-        setError(payload.error ?? '需要密码');
-        return;
-      }
-      setStatus('error');
-      setError(payload.error ?? '无法加载分享内容');
-      return;
-    }
-
-    setData(payload as ShareResponse);
-    setStatus('success');
-  };
-
-  useEffect(() => {
-    void requestShare();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token]);
-
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setAttempts(prev => prev + 1);
-    await requestShare({ password });
-  };
-
-  if (status === 'loading') {
-    return <p className="text-muted-foreground text-sm">正在加载分享内容...</p>;
-  }
-
-  if (status === 'password') {
-    return (
-      <div className="mx-auto max-w-sm space-y-4">
-        <Alert>
-          <AlertTitle>访问受限</AlertTitle>
-          <AlertDescription>{error ?? '请输入访问密码'}</AlertDescription>
-        </Alert>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="share-password">访问密码</Label>
-            <Input
-              id="share-password"
-              value={password}
-              onChange={event => setPassword(event.target.value)}
-              placeholder="请输入分享密码"
-              required
-            />
-          </div>
-          <Button type="submit" className="w-full">
-            提交
-          </Button>
-          {attempts > 0 && error && <p className="text-destructive text-xs">{error}</p>}
-        </form>
-      </div>
-    );
-  }
-
-  if (status === 'error') {
-    return (
-      <Alert variant="destructive">
-        <AlertTitle>分享不可用</AlertTitle>
-        <AlertDescription>{error ?? '无法访问该分享链接'}</AlertDescription>
-      </Alert>
-    );
-  }
-
-  if (!data) {
-    return null;
-  }
-
-  const mappedPhotos = data.category.photos.map(photo => ({
-    id: photo.id,
-    filename: photo.filename,
-    originalName: photo.originalName,
-    description: photo.description,
-    createdAt: photo.createdAt,
-    uploader: photo.uploader,
-    thumbnailUrl: photo.thumbnailUrl,
-    mediaType: photo.mediaType,
-    fileUrl: photo.fileUrl,
-    isOwner: false,
-  }));
-
-  return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <h1 className="text-2xl font-semibold tracking-tight">{data.category.name}</h1>
-        {data.category.description && (
-          <p className="text-muted-foreground text-sm">{data.category.description}</p>
-        )}
-        <p className="text-muted-foreground text-xs">
-          {data.category.photos.length} 个媒体
-          {data.expiresAt && ` · 链接将在 ${new Date(data.expiresAt).toLocaleString()} 过期`}
-        </p>
-      </div>
-      {data.category.photos.length === 0 ? (
-        <p className="text-muted-foreground rounded-lg border border-dashed p-8 text-center">
-          暂未添加任何媒体。
-        </p>
-      ) : (
-        <PhotoGrid
-          photos={mappedPhotos}
-          canManageAll={false}
-          allowOwnActions={false}
-          downloadStrategy="public"
-        />
-      )}
-    </div>
-  );
-}
diff --git a/components/skeletons/admin-tab-skeleton.tsx b/components/skeletons/admin-tab-skeleton.tsx
new file mode 100644
index 0000000..1295403
--- /dev/null
+++ b/components/skeletons/admin-tab-skeleton.tsx
@@ -0,0 +1,19 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function AdminTabSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-2">
+        {Array.from({ length: 4 }, (_, index) => (
+          <Skeleton key={index} className="h-9 w-24" />
+        ))}
+      </div>
+      <div className="space-y-2 overflow-hidden rounded-lg border p-3">
+        <Skeleton className="h-4 w-full" />
+        {Array.from({ length: rows }, (_, index) => (
+          <Skeleton key={index} className="h-11 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/skeletons/album-skeleton.tsx b/components/skeletons/album-skeleton.tsx
new file mode 100644
index 0000000..c260e4a
--- /dev/null
+++ b/components/skeletons/album-skeleton.tsx
@@ -0,0 +1,22 @@
+import { PhotoGridSkeleton } from '@/components/skeletons/photo-grid-skeleton';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function AlbumSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-7 w-44" />
+          <Skeleton className="h-4 w-72" />
+          <div className="flex flex-wrap gap-2">
+            <Skeleton className="h-6 w-24 rounded-full" />
+            <Skeleton className="h-6 w-40 rounded-full" />
+            <Skeleton className="h-6 w-36 rounded-full" />
+          </div>
+        </div>
+        <Skeleton className="h-8 w-40" />
+      </div>
+      <PhotoGridSkeleton count={count} />
+    </div>
+  );
+}
diff --git a/components/skeletons/category-grid-skeleton.tsx b/components/skeletons/category-grid-skeleton.tsx
new file mode 100644
index 0000000..41ef259
--- /dev/null
+++ b/components/skeletons/category-grid-skeleton.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function CategoryGridSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-7 w-28" />
+        <Skeleton className="h-8 w-40" />
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: count }, (_, index) => (
+          <Skeleton key={index} className="h-64 w-full rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/skeletons/file-table-skeleton.tsx b/components/skeletons/file-table-skeleton.tsx
new file mode 100644
index 0000000..cbd0db6
--- /dev/null
+++ b/components/skeletons/file-table-skeleton.tsx
@@ -0,0 +1,19 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+/** 只覆盖文件表区域：页头与侧栏由外层壳渲染，已在屏幕上 */
+export function FileTableSkeleton({ rows = 6 }: { rows?: number }) {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2 rounded-md border p-3">
+        <Skeleton className="h-4 w-full" />
+        {Array.from({ length: rows }, (_, index) => (
+          <Skeleton key={index} className="h-10 w-full" />
+        ))}
+      </div>
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-8 w-40" />
+      </div>
+    </div>
+  );
+}
diff --git a/components/skeletons/page-skeleton.tsx b/components/skeletons/page-skeleton.tsx
new file mode 100644
index 0000000..baf939f
--- /dev/null
+++ b/components/skeletons/page-skeleton.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function PageSkeleton({ rows = 4 }: { rows?: number }) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-7 w-40" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <div className="space-y-3">
+        {Array.from({ length: rows }, (_, index) => (
+          <Skeleton key={index} className="h-12 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/skeletons/photo-grid-skeleton.tsx b/components/skeletons/photo-grid-skeleton.tsx
new file mode 100644
index 0000000..dca5983
--- /dev/null
+++ b/components/skeletons/photo-grid-skeleton.tsx
@@ -0,0 +1,20 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function PhotoGridSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <Skeleton className="h-4 w-56" />
+        <Skeleton className="h-8 w-32" />
+      </div>
+      <div className="space-y-3">
+        <Skeleton className="h-4 w-20" />
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: count }, (_, index) => (
+            <Skeleton key={index} className="aspect-square w-full rounded-xl" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/empty-state.tsx b/components/ui/empty-state.tsx
new file mode 100644
index 0000000..c086a0c
--- /dev/null
+++ b/components/ui/empty-state.tsx
@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils';
+import type { ReactNode } from 'react';
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'text-muted-foreground flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center',
+        className
+      )}
+    >
+      {icon}
+      <div className="space-y-1">
+        <p>{title}</p>
+        {description ? <p className="text-sm">{description}</p> : null}
+      </div>
+      {action ? <div className="mt-1">{action}</div> : null}
+    </div>
+  );
+}
diff --git a/components/ui/error-alert.tsx b/components/ui/error-alert.tsx
new file mode 100644
index 0000000..959aa11
--- /dev/null
+++ b/components/ui/error-alert.tsx
@@ -0,0 +1,21 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { cn } from '@/lib/utils';
+import type { ReactNode } from 'react';
+
+/** 错误就地显示在受影响的内容旁边，不引入 toast 依赖 */
+export function ErrorAlert({
+  title,
+  message,
+  className,
+}: {
+  title?: string;
+  message: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Alert variant="destructive" className={cn(className)}>
+      {title ? <AlertTitle>{title}</AlertTitle> : null}
+      <AlertDescription>{message}</AlertDescription>
+    </Alert>
+  );
+}
diff --git a/components/upload-form.tsx b/components/upload-form.tsx
index 5fa176d..0c8a63a 100644
--- a/components/upload-form.tsx
+++ b/components/upload-form.tsx
@@ -2,6 +2,7 @@
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import { ErrorAlert } from '@/components/ui/error-alert';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -226,12 +227,7 @@ export function UploadForm({ categories, defaultCategoryId, onSuccess }: UploadF
         </Alert>
       )}
 
-      {error && (
-        <Alert variant="destructive">
-          <AlertTitle>上传失败</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
+      {error && <ErrorAlert title="上传失败" message={error} />}
 
       {uploaded.length > 0 && (
         <div className="space-y-3">
diff --git a/lib/access-rules.ts b/lib/access-rules.ts
new file mode 100644
index 0000000..f35adc1
--- /dev/null
+++ b/lib/access-rules.ts
@@ -0,0 +1,65 @@
+/**
+ * 可见性规则的唯一归属地。纯函数、零运行时依赖，因此同一份判断既能被服务端组件
+ * 使用，也能被 route handler 使用，还能脱离数据库单测。
+ *
+ * 只使用裸字符串字面量：types/prisma-client.d.ts 把 Prisma 的 *WhereInput 声明为
+ * Record<string, unknown>，任何 where 子句都不受类型检查，写错只能靠测试矩阵发现。
+ */
+
+export const VISIBILITIES = ['private', 'internal', 'public'] as const;
+
+export type Visibility = (typeof VISIBILITIES)[number];
+export type Role = 'admin' | 'member';
+
+/** null 表示匿名访客 */
+export type Viewer = { id: number; role: Role } | null;
+
+/**
+ * 相册访问裁决，而不是布尔：页面需要据此在 notFound() 与 redirect('/login') 之间选择，
+ * API 需要据此在 404 与 401 之间选择。规则由这里裁定，响应形式仍归调用方。
+ */
+export type CategoryVerdict = 'allow' | 'not-found' | 'login';
+
+type CategoryLike = { visibility: Visibility };
+type FileSetLike = { visibility: Visibility; createdBy: number };
+
+const MEMBER_VISIBLE: Visibility[] = ['internal', 'public'];
+
+// —— 相册：以读者为绝对（匿名可浏览 public）——
+
+export function categoryWhereFor(viewer: Viewer): Record<string, unknown> {
+  if (!viewer) return { visibility: 'public' };
+  if (viewer.role === 'admin') return {};
+  return { visibility: { in: MEMBER_VISIBLE } };
+}
+
+export function canViewCategory(viewer: Viewer, category: CategoryLike): CategoryVerdict {
+  if (viewer?.role === 'admin') return 'allow';
+  if (category.visibility === 'public') return 'allow';
+  if (category.visibility === 'internal') return viewer ? 'allow' : 'login';
+  return 'not-found';
+}
+
+export function canUploadToCategory(viewer: Viewer, category: CategoryLike): boolean {
+  if (!viewer) return false;
+  return viewer.role === 'admin' || category.visibility !== 'private';
+}
+
+// —— 文件集：必须登录，且以拥有者为相对（各入口的 requireAuth 仍各自保留）——
+
+export function fileSetWhereFor(viewer: NonNullable<Viewer>): Record<string, unknown> {
+  if (viewer.role === 'admin') return {};
+  return {
+    OR: [{ visibility: 'internal' }, { visibility: 'public' }, { createdBy: viewer.id }],
+  };
+}
+
+/** 读取与上传目前共享同一个布尔式，因此合并为一个谓词 */
+export function canTouchFileSet(viewer: NonNullable<Viewer>, fileSet: FileSetLike): boolean {
+  return (
+    viewer.role === 'admin' ||
+    fileSet.visibility === 'public' ||
+    fileSet.visibility === 'internal' ||
+    fileSet.createdBy === viewer.id
+  );
+}
diff --git a/lib/access.ts b/lib/access.ts
new file mode 100644
index 0000000..79d00b6
--- /dev/null
+++ b/lib/access.ts
@@ -0,0 +1,49 @@
+import type { Viewer } from '@/lib/access-rules';
+import { auth } from '@/lib/auth';
+import { prisma } from '@/lib/db';
+import { redirect } from 'next/navigation';
+import { cache } from 'react';
+import 'server-only';
+
+export const getSession = cache(async () => auth());
+
+/**
+ * 每次请求都复核 User.status：登录时的一次性校验（lib/auth.ts 的 authorize）挡不住
+ * "会话存活于被拒绝之后"，因为 JWT 从不回查数据库。
+ *
+ * 非 active 一律返回 null（等价于匿名访客）而不是抛错——这样这次修复不可能
+ * 顺手开出新的特权路径。
+ */
+export const getViewer = cache(async (): Promise<Viewer> => {
+  const session = await getSession();
+  const userId = session?.user?.id ? Number.parseInt(session.user.id, 10) : NaN;
+  if (!session?.user || Number.isNaN(userId)) return null;
+
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { id: true, role: true, status: true },
+  });
+  if (!user || user.status !== 'active') return null;
+
+  return { id: user.id, role: user.role === 'admin' ? 'admin' : 'member' };
+});
+
+function loginTarget(callbackUrl?: string) {
+  return callbackUrl ? `/login?callbackUrl=${encodeURIComponent(callbackUrl)}` : '/login';
+}
+
+export async function requireViewer(callbackUrl?: string): Promise<NonNullable<Viewer>> {
+  const viewer = await getViewer();
+  if (!viewer) {
+    redirect(loginTarget(callbackUrl));
+  }
+  return viewer;
+}
+
+export async function requireAdminViewer(callbackUrl?: string): Promise<NonNullable<Viewer>> {
+  const viewer = await requireViewer(callbackUrl);
+  if (viewer.role !== 'admin') {
+    redirect(loginTarget(callbackUrl));
+  }
+  return viewer;
+}
diff --git a/lib/auth-guards.ts b/lib/auth-guards.ts
index 4b4a065..ff910e7 100644
--- a/lib/auth-guards.ts
+++ b/lib/auth-guards.ts
@@ -1,9 +1,11 @@
+import { getViewer } from '@/lib/access';
+import type { Viewer } from '@/lib/access-rules';
 import { auth } from '@/lib/auth';
 import type { Session } from 'next-auth';
 import { NextResponse } from 'next/server';
 
 type SessionWithUser = Omit<Session, 'user'> & { user: NonNullable<Session['user']> };
-type AuthOk = { ok: true; session: SessionWithUser };
+type AuthOk = { ok: true; session: SessionWithUser; viewer: NonNullable<Viewer> };
 type AuthErr = { ok: false; error: NextResponse };
 type AuthResult = AuthOk | AuthErr;
 
@@ -15,14 +17,27 @@ export async function requireAuth(): Promise<AuthResult> {
       error: NextResponse.json({ error: '未授权' }, { status: 401 }),
     };
   }
-  return { ok: true, session: session as SessionWithUser };
+
+  // viewer 为空意味着账号已不存在或状态不是 active：JWT 里仍带着旧角色，必须当作未登录处理
+  const viewer = await getViewer();
+  if (!viewer) {
+    return {
+      ok: false,
+      error: NextResponse.json(
+        { error: '账户待审核或已被拒绝', code: 'account_inactive' },
+        { status: 401 }
+      ),
+    };
+  }
+
+  return { ok: true, session: session as SessionWithUser, viewer };
 }
 
 export async function requireAdmin(): Promise<AuthResult> {
   const res = await requireAuth();
   if (!res.ok) return res;
 
-  if (res.session.user.role !== 'admin') {
+  if (res.viewer.role !== 'admin') {
     return {
       ok: false,
       error: NextResponse.json({ error: '权限不足' }, { status: 403 }),
diff --git a/lib/auth.ts b/lib/auth.ts
index 5220d3c..c0a32bd 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -2,6 +2,7 @@ import bcrypt from 'bcryptjs';
 import type { NextAuthOptions } from 'next-auth';
 import { getServerSession } from 'next-auth';
 import Credentials from 'next-auth/providers/credentials';
+import { cache } from 'react';
 
 import { prisma } from './db';
 
@@ -84,6 +85,4 @@ export const authOptions: NextAuthOptions = {
   },
 };
 
-export function auth() {
-  return getServerSession(authOptions);
-}
+export const auth = cache(() => getServerSession(authOptions));
diff --git a/lib/params.ts b/lib/params.ts
new file mode 100644
index 0000000..b83ba33
--- /dev/null
+++ b/lib/params.ts
@@ -0,0 +1,47 @@
+/**
+ * 读取 searchParams 的纯函数。服务端组件与未来的单测共用，不依赖 Next。
+ */
+
+export type ParamValue = string | string[] | undefined;
+export type SearchParams = Record<string, ParamValue>;
+
+function first(value: ParamValue): string | undefined {
+  if (Array.isArray(value)) return value[0];
+  return value;
+}
+
+export function readString(params: SearchParams, key: string): string {
+  return first(params[key]) ?? '';
+}
+
+export function readInt(params: SearchParams, key: string): number | null {
+  const raw = first(params[key]);
+  if (!raw) return null;
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isInteger(parsed) ? parsed : null;
+}
+
+export function readSort(params: SearchParams): 'asc' | 'desc' {
+  return readString(params, 'sort') === 'asc' ? 'asc' : 'desc';
+}
+
+/** 白名单取值：URL 里是别的东西时退回默认值，而不是把非法值带进查询 */
+export function readEnum<T extends string>(
+  params: SearchParams,
+  key: string,
+  allowed: readonly T[],
+  fallback: T
+): T {
+  const raw = readString(params, key);
+  return (allowed as readonly string[]).includes(raw) ? (raw as T) : fallback;
+}
+
+/**
+ * 把请求的页码钳进真实范围：删掉最后一页的最后一个条目后，
+ * 刷新应落在新的末页，而不是一片空白。
+ */
+export function clampPage(page: number | null, total: number, pageSize: number): number {
+  const last = Math.max(1, Math.ceil(total / pageSize));
+  if (page === null || page < 1) return 1;
+  return Math.min(page, last);
+}
diff --git a/lib/query-state.ts b/lib/query-state.ts
new file mode 100644
index 0000000..dcffc42
--- /dev/null
+++ b/lib/query-state.ts
@@ -0,0 +1,136 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const PAGE_KEY = 'p';
+
+/**
+ * 服务端参数（?sort/?fileset/?q/?p…）的唯一写入口：写入会触发一次 RSC 请求。
+ * 只改客户端参数时不要用这里，用 useShallowParam。
+ */
+export function useQueryParamWriter() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  return useCallback(
+    (key: string, value: string | null) => {
+      const next = new URLSearchParams(searchParams.toString());
+      if (value === null || value === '') {
+        next.delete(key);
+      } else {
+        next.set(key, value);
+      }
+      // 改写任何筛选都可能让"旧筛选的第 7 页"变成空结果，所以顺手清掉页码
+      if (key !== PAGE_KEY) {
+        next.delete(PAGE_KEY);
+      }
+      const query = next.toString();
+      router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    },
+    [router, pathname, searchParams]
+  );
+}
+
+/**
+ * 把输入框的值防抖写入 URL。initialValue 传服务端渲染时已知的 ?q= 值，
+ * 于是深链（?q=…&p=2）首帧不会被回写覆盖——那会连带删掉 ?p=。
+ */
+export function useDebouncedParam(key: string, value: string, delay = 300) {
+  const setParam = useQueryParamWriter();
+  const lastWritten = useRef(value);
+
+  useEffect(() => {
+    const trimmed = value.trim();
+    if (trimmed === lastWritten.current) return;
+
+    const handle = setTimeout(() => {
+      lastWritten.current = trimmed;
+      setParam(key, trimmed || null);
+    }, delay);
+
+    return () => clearTimeout(handle);
+  }, [value, key, delay, setParam]);
+}
+
+/**
+ * 只改呈现、不改数据的参数（?view/?group/?photo）走浅层 URL：
+ * history.replaceState 不发请求，服务端也不需要知道它。
+ *
+ * 关键约束：手动 replaceState 之后 useSearchParams() 与 RSC 的 searchParams
+ * 都不会更新，所以这里只在挂载时读一次 URL，之后以本地 state 为准。
+ */
+function readRawParam(key: string): string | null {
+  if (typeof window === 'undefined') return null;
+  return new URLSearchParams(window.location.search).get(key);
+}
+
+function writeRawParam(key: string, value: string | null, push: boolean) {
+  const params = new URLSearchParams(window.location.search);
+  if (value === null) {
+    params.delete(key);
+  } else {
+    params.set(key, value);
+  }
+  const query = params.toString();
+  const url = `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`;
+  if (push) {
+    window.history.pushState(null, '', url);
+  } else {
+    window.history.replaceState(null, '', url);
+  }
+}
+
+export function useShallowParam<T extends string>(
+  key: string,
+  allowed: readonly T[],
+  fallback: T
+): [T, (next: T | ((prev: T) => T)) => void] {
+  const [value, setValue] = useState<T>(() => {
+    const raw = readRawParam(key);
+    return raw && (allowed as readonly string[]).includes(raw) ? (raw as T) : fallback;
+  });
+  const current = useRef(value);
+  current.current = value;
+
+  const update = useCallback(
+    (next: T | ((prev: T) => T)) => {
+      const resolved =
+        typeof next === 'function' ? (next as (prev: T) => T)(current.current) : next;
+      current.current = resolved;
+      setValue(resolved);
+      writeRawParam(key, resolved === fallback ? null : resolved, false);
+    },
+    [key, fallback]
+  );
+
+  return [value, update];
+}
+
+/**
+ * 灯箱用：打开走 pushState，于是浏览器返回键先关灯箱再离开页面；
+ * 关闭走 replaceState。popstate 时重新读取 URL，返回键才会真的落到对应状态上。
+ *
+ * 与上面的规则唯一的例外：?photo= 也会被服务端读一次，用于把深链指向的照片
+ * 补进当前页窗口（见 app/album/[id]/page.tsx）。之后它就只由客户端持有。
+ */
+export function useShallowIdParam(key: string): [string | null, (next: string | null) => void] {
+  const [value, setValue] = useState<string | null>(() => readRawParam(key));
+
+  const update = useCallback(
+    (next: string | null) => {
+      setValue(next);
+      writeRawParam(key, next, next !== null);
+    },
+    [key]
+  );
+
+  useEffect(() => {
+    const onPopState = () => setValue(readRawParam(key));
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, [key]);
+
+  return [value, update];
+}
diff --git a/lib/share-auth.ts b/lib/share-auth.ts
new file mode 100644
index 0000000..ac1c992
--- /dev/null
+++ b/lib/share-auth.ts
@@ -0,0 +1,50 @@
+import { cookies } from 'next/headers';
+import { createHmac, timingSafeEqual } from 'node:crypto';
+import 'server-only';
+
+/** 解锁会话最长 8 小时，且不超过分享链接本身的有效期 */
+const MAX_UNLOCK_MINUTES = 8 * 60;
+
+function gateValue(token: string): string {
+  const secret = process.env.NEXTAUTH_SECRET;
+  if (!secret) {
+    throw new Error('NEXTAUTH_SECRET 未配置，无法签发分享解锁凭证');
+  }
+  return createHmac('sha256', secret).update(`share-gate:${token}`).digest('hex');
+}
+
+/** cookie-name 不能含冒号等字符，所以用连字符前缀 */
+export function shareCookieName(token: string): string {
+  return `share-${token}`;
+}
+
+export async function isShareUnlocked(token: string): Promise<boolean> {
+  const store = await cookies();
+  const value = store.get(shareCookieName(token))?.value;
+  if (!value) return false;
+
+  const expected = gateValue(token);
+  const provided = Buffer.from(value);
+  const accepted = Buffer.from(expected);
+  return provided.length === accepted.length && timingSafeEqual(provided, accepted);
+}
+
+export function buildUnlockCookie(token: string, expiresAt: Date | null) {
+  const remaining = expiresAt
+    ? Math.floor((expiresAt.getTime() - Date.now()) / 60_000)
+    : MAX_UNLOCK_MINUTES;
+  const minutes = Math.max(1, Math.min(MAX_UNLOCK_MINUTES, remaining));
+
+  return {
+    name: shareCookieName(token),
+    // 凭证由服务端密钥派生：分享密码本身既不入库为明文，也不写进 cookie
+    value: gateValue(token),
+    options: {
+      httpOnly: true,
+      sameSite: 'lax' as const,
+      secure: process.env.NODE_ENV === 'production',
+      path: `/share/${token}`,
+      maxAge: minutes * 60,
+    },
+  };
+}
diff --git a/lib/validation.ts b/lib/validation.ts
new file mode 100644
index 0000000..51af172
--- /dev/null
+++ b/lib/validation.ts
@@ -0,0 +1,4 @@
+import { VISIBILITIES } from '@/lib/access-rules';
+import { z } from 'zod';
+
+export const visibilitySchema = z.enum(VISIBILITIES);
diff --git a/package.json b/package.json
index 6f078b6..4e7d93c 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "prisma": "^6.17.1",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^5.0.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 04c3d74..12169a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -146,6 +146,9 @@ importers:
       typescript:
         specifier: ^5
         version: 5.9.3
+      vitest:
+        specifier: ^5.0.1
+        version: 5.0.1(@types/node@20.19.21)(vite@8.3.0(@types/node@20.19.21)(jiti@2.6.1))
 
 packages:
   '@alloc/quick-lru@5.2.0':
@@ -591,6 +594,12 @@ packages:
         integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==,
       }
 
+  '@jridgewell/sourcemap-codec@1.6.0':
+    resolution:
+      {
+        integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==,
+      }
+
   '@jridgewell/trace-mapping@0.3.31':
     resolution:
       {
@@ -715,6 +724,12 @@ packages:
       }
     engines: { node: '>=12.4.0' }
 
+  '@oxc-project/types@0.150.0':
+    resolution:
+      {
+        integrity: sha512-rDS5/31E9HfPl/CIzGrn0DOlvBbXFseQ5URJ9sYMfstbKLD/c6Gm9vmRzRGDdAXyOIL4zmO37lc9RIwYqVruZw==,
+      }
+
   '@panva/hkdf@1.2.1':
     resolution:
       {
@@ -1265,6 +1280,147 @@ packages:
         integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==,
       }
 
+  '@rolldown/binding-android-arm-eabi@1.2.9':
+    resolution:
+      {
+        integrity: sha512-tNISae1QEf/vkb3xkRcjV5SEdzPE97We5IVaa2Z8jSszQPZ8U60B/YCYpw4QI7VidYsBtKavczXf+DyDs9WGxw==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [arm]
+    os: [android]
+
+  '@rolldown/binding-android-arm64@1.2.9':
+    resolution:
+      {
+        integrity: sha512-YC8YsI30o606GTZi0VyzYlsDKFP8W61i/QzayHDkLbNEz/IShqAmTa+hsJRj13xTHA0H+6fk4b2UmGn+Q/cMlg==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.2.9':
+    resolution:
+      {
+        integrity: sha512-IwhlH3qK5urrY8hZiEgGkHKEFN901p/p2bjxCxJlr4GyNnF7wYpUvK+Y43uaRYuC4hpfjzbR3SJC3arX1jGvmw==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.2.9':
+    resolution:
+      {
+        integrity: sha512-XxpJfVzFh+jilRxIXUqcfYAYcunIc/XEzIizsOL1fcJee5Sf7H3mH8WlLmfHfluz5amqR88QQo9izKtmMlavAw==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.2.9':
+    resolution:
+      {
+        integrity: sha512-kSfvhmgeWyfkbT3p/1s5vSgboogoah2zkm9fX2zjg2hHxSV7T4KhMWRUUaRk4OXNqoD3QAUeRqLcs1aZOK4U1g==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.9':
+    resolution:
+      {
+        integrity: sha512-1RVzG17pxqbTfYLC352JlLt6kKLG+6Hr30n8DlIJqsnV5luUDd2Qdx9Ayw1Cabfyb1K9k0jXEZ7evxkRoT+uiw==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.9':
+    resolution:
+      {
+        integrity: sha512-BXqPvZ2drqVD+/Z8UpKwcs4Mp7grM+eGFku4CAEKrEtcbAsUpzREphK1sogCRZGreVPiMkiiBtw0n3TPteuqvw==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [arm64]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-musl@1.2.9':
+    resolution:
+      {
+        integrity: sha512-11vWvo8YDwLzukt27J3aYDWU+gg2P7J+ZOmiJ0hkF5BXZDW7pVya7r40MXDy6ya0i9KamoENSVKIugvJNgFXIA==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [arm64]
+    os: [linux]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.9':
+    resolution:
+      {
+        integrity: sha512-a1tijMkdwsIARtc0F39ApURROkf3NwqinI6TOiSSWCTR7dT96dffNvMUtDHnq64wKNTIZOIlzKrFvvFUznJiyw==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.9':
+    resolution:
+      {
+        integrity: sha512-x6SQNdAvv4c3hWqTMaWuawzMX9myaCs/yEmlGsxJzkdClnHW7FbrjQuSiRDhuSYzEYoEMhsaJy9qHG/XNemJPQ==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [s390x]
+    os: [linux]
+
+  '@rolldown/binding-linux-x64-gnu@1.2.9':
+    resolution:
+      {
+        integrity: sha512-9s0AZ8BFK5/n7B/TBoa2yJE3gI3KURrbXcPBlsAsvjU4VeJKgE90y1YtNxyEUIcHPQkg6/yfF3qihUrcM/Kf0Q==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [x64]
+    os: [linux]
+
+  '@rolldown/binding-linux-x64-musl@1.2.9':
+    resolution:
+      {
+        integrity: sha512-P7VWAmV+WdJluH7ovnRGoiv2i8To7GAZ+kGzfGup635cyL7SyYl3lSUaA3Gp5THf0n/Co5EyEqb2zbqq+nMOHQ==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [x64]
+    os: [linux]
+
+  '@rolldown/binding-openharmony-arm64@1.2.9':
+    resolution:
+      {
+        integrity: sha512-1qixtsE4BK8h+yS3BfmZ09UhA7O/N4IACva6YBr7EBvCJraByTuRcgOTaiA62Tm0vey3UcKXLOaoGHtYmNGEVg==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.9':
+    resolution:
+      {
+        integrity: sha512-ok8IQjcEPs1AKZfuEUznVBrJw+gK4soq+bx8b1X2XoMqVClarc1q5JDmVtWXY1xfr6ZuHTAsPXHTgTrqKTZeww==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.2.9':
+    resolution:
+      {
+        integrity: sha512-Ip2mXoU0hM0boq3Rf+ekuT653OROSo6aSYcPT1VHE4q52KvyxgFkQgrgb/IEsxOuvQ2fZZbs8khJAyCEPM24/g==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution:
+      {
+        integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==,
+      }
+
   '@rtsao/scc@1.1.0':
     resolution:
       {
@@ -1450,12 +1606,24 @@ packages:
         integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==,
       }
 
+  '@types/chai@5.2.3':
+    resolution:
+      {
+        integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==,
+      }
+
   '@types/debug@4.1.12':
     resolution:
       {
         integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==,
       }
 
+  '@types/deep-eql@4.0.2':
+    resolution:
+      {
+        integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==,
+      }
+
   '@types/estree-jsx@1.0.5':
     resolution:
       {
@@ -1783,6 +1951,26 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vitest/mocker@5.0.1':
+    resolution:
+      {
+        integrity: sha512-6K1DoBNAPGvuOcSsGA4D6x+5zEEff/KmOOP3uetT2TrGpVfI+HRHRnJJfKi5ib/g1vx8IYHQD8s0pbJz8WQI7Q==,
+      }
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/spy@5.0.1':
+    resolution:
+      {
+        integrity: sha512-rbto/mF/SGERxEgYOek7Xm6B9b+y+mVoo+f4b2LymYO8zM1b7uB5nHuhVMTP2hxdzgxvGiZYGxGIaMvL5y180Q==,
+      }
+
   '@volcengine/tos-sdk@2.7.5':
     resolution:
       {
@@ -1901,6 +2089,13 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  assertion-error@2.0.1:
+    resolution:
+      {
+        integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==,
+      }
+    engines: { node: '>=12' }
+
   ast-types-flow@0.0.8:
     resolution:
       {
@@ -2048,6 +2243,13 @@ packages:
         integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==,
       }
 
+  chai@6.2.2:
+    resolution:
+      {
+        integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==,
+      }
+    engines: { node: '>=18' }
+
   chalk@4.1.2:
     resolution:
       {
@@ -2411,6 +2613,12 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  es-module-lexer@2.3.2:
+    resolution:
+      {
+        integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==,
+      }
+
   es-object-atoms@1.1.1:
     resolution:
       {
@@ -2653,6 +2861,12 @@ packages:
         integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==,
       }
 
+  estree-walker@3.0.3:
+    resolution:
+      {
+        integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==,
+      }
+
   esutils@2.0.3:
     resolution:
       {
@@ -2666,6 +2880,13 @@ packages:
         integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==,
       }
 
+  expect-type@1.4.0:
+    resolution:
+      {
+        integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==,
+      }
+    engines: { node: '>=12.0.0' }
+
   exsolve@1.0.7:
     resolution:
       {
@@ -2808,6 +3029,14 @@ packages:
       }
     engines: { node: '>= 6' }
 
+  fsevents@2.3.3:
+    resolution:
+      {
+        integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==,
+      }
+    engines: { node: ^8.16.0 || ^10.6.0 || >=11.0.0 }
+    os: [darwin]
+
   function-bind@1.1.2:
     resolution:
       {
@@ -3484,6 +3713,15 @@ packages:
         integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==,
       }
 
+  lightningcss-android-arm64@1.33.0:
+    resolution:
+      {
+        integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [arm64]
+    os: [android]
+
   lightningcss-darwin-arm64@1.30.1:
     resolution:
       {
@@ -3493,6 +3731,15 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  lightningcss-darwin-arm64@1.33.0:
+    resolution:
+      {
+        integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-darwin-x64@1.30.1:
     resolution:
       {
@@ -3502,6 +3749,15 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  lightningcss-darwin-x64@1.33.0:
+    resolution:
+      {
+        integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [x64]
+    os: [darwin]
+
   lightningcss-freebsd-x64@1.30.1:
     resolution:
       {
@@ -3511,6 +3767,15 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  lightningcss-freebsd-x64@1.33.0:
+    resolution:
+      {
+        integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [x64]
+    os: [freebsd]
+
   lightningcss-linux-arm-gnueabihf@1.30.1:
     resolution:
       {
@@ -3520,6 +3785,15 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution:
+      {
+        integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [arm]
+    os: [linux]
+
   lightningcss-linux-arm64-gnu@1.30.1:
     resolution:
       {
@@ -3529,6 +3803,15 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution:
+      {
+        integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-arm64-musl@1.30.1:
     resolution:
       {
@@ -3538,6 +3821,15 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution:
+      {
+        integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-x64-gnu@1.30.1:
     resolution:
       {
@@ -3547,6 +3839,15 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution:
+      {
+        integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-linux-x64-musl@1.30.1:
     resolution:
       {
@@ -3556,6 +3857,15 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution:
+      {
+        integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution:
       {
@@ -3565,6 +3875,15 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution:
+      {
+        integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [arm64]
+    os: [win32]
+
   lightningcss-win32-x64-msvc@1.30.1:
     resolution:
       {
@@ -3574,6 +3893,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution:
+      {
+        integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [x64]
+    os: [win32]
+
   lightningcss@1.30.1:
     resolution:
       {
@@ -3581,6 +3909,13 @@ packages:
       }
     engines: { node: '>= 12.0.0' }
 
+  lightningcss@1.33.0:
+    resolution:
+      {
+        integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==,
+      }
+    engines: { node: '>= 12.0.0' }
+
   locate-path@6.0.0:
     resolution:
       {
@@ -3640,6 +3975,12 @@ packages:
         integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==,
       }
 
+  magic-string@1.4.1:
+    resolution:
+      {
+        integrity: sha512-8lyCu36ErXR0J9uaGKlKQoiLZKmtI63YGLE8G2o9jyRPdr4X47LusSOwgOJOzcVtp81fTAAjxR7BwKz682Jhow==,
+      }
+
   markdown-table@3.0.4:
     resolution:
       {
@@ -3986,6 +4327,14 @@ packages:
     engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
     hasBin: true
 
+  nanoid@3.3.19:
+    resolution:
+      {
+        integrity: sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==,
+      }
+    engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
+    hasBin: true
+
   napi-postinstall@0.3.4:
     resolution:
       {
@@ -4133,6 +4482,13 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  obug@2.2.1:
+    resolution:
+      {
+        integrity: sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==,
+      }
+    engines: { node: '>=12.20.0' }
+
   ohash@2.0.11:
     resolution:
       {
@@ -4269,6 +4625,13 @@ packages:
       }
     engines: { node: '>=12' }
 
+  picomatch@4.0.7:
+    resolution:
+      {
+        integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==,
+      }
+    engines: { node: '>=12' }
+
   pkg-types@2.3.0:
     resolution:
       {
@@ -4289,6 +4652,13 @@ packages:
       }
     engines: { node: ^10 || ^12 || >=14 }
 
+  postcss@8.5.28:
+    resolution:
+      {
+        integrity: sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==,
+      }
+    engines: { node: ^10 || ^12 || >=14 }
+
   postcss@8.5.6:
     resolution:
       {
@@ -4638,6 +5008,14 @@ packages:
       }
     engines: { iojs: '>=1.0.0', node: '>=0.10.0' }
 
+  rolldown@1.2.9:
+    resolution:
+      {
+        integrity: sha512-hx/Pv0N1haXRb11qkfnK5MXB/iqr7i0yjWQqmO9uHqZpBgQSqzc8UsSnEpalsh+j1I8qQ2CkXAkJC8Br3dKSlg==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    hasBin: true
+
   run-parallel@1.2.0:
     resolution:
       {
@@ -4775,6 +5153,12 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  siginfo@2.0.0:
+    resolution:
+      {
+        integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==,
+      }
+
   source-map-js@1.2.1:
     resolution:
       {
@@ -4800,6 +5184,18 @@ packages:
         integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==,
       }
 
+  stackback@0.0.2:
+    resolution:
+      {
+        integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==,
+      }
+
+  std-env@4.2.0:
+    resolution:
+      {
+        integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==,
+      }
+
   stop-iteration-iterator@1.1.0:
     resolution:
       {
@@ -4956,12 +5352,26 @@ packages:
       }
     engines: { node: '>=18' }
 
+  tinybench@6.1.4:
+    resolution:
+      {
+        integrity: sha512-9APumHG7r4yOk4X4WlkmE71aZcv1gvin1czO3OQ1U9iJcFA5Ja/ygyb0vPOVHTthFozUYs8CLoLUlM8grb2lTQ==,
+      }
+    engines: { node: '>=20.0.0' }
+
   tinyexec@1.0.1:
     resolution:
       {
         integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==,
       }
 
+  tinyexec@1.3.0:
+    resolution:
+      {
+        integrity: sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==,
+      }
+    engines: { node: '>=18' }
+
   tinyglobby@0.2.15:
     resolution:
       {
@@ -4969,6 +5379,13 @@ packages:
       }
     engines: { node: '>=12.0.0' }
 
+  tinyglobby@0.2.17:
+    resolution:
+      {
+        integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==,
+      }
+    engines: { node: '>=12.0.0' }
+
   to-regex-range@5.0.1:
     resolution:
       {
@@ -5204,6 +5621,96 @@ packages:
         integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==,
       }
 
+  vite@8.3.0:
+    resolution:
+      {
+        integrity: sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==,
+      }
+    engines: { node: ^20.19.0 || >=22.12.0 }
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.7.1
+      esbuild: ^0.27.0 || ^0.28.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitest@5.0.1:
+    resolution:
+      {
+        integrity: sha512-iA95lQbKEkvrtTkdAgnWbXfbipWiiWe/hDl2P5tMi6WFwD76G0NxXAGp/M9EOcYupeGJRr6wppMc7CoA41TQjg==,
+      }
+    engines: { node: ^22.12.0 || ^24.0.0 || >=26.0.0 }
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 5.0.1
+      '@vitest/browser-preview': 5.0.1
+      '@vitest/browser-webdriverio': ^5.0.0-beta.5 || >=5.0.0
+      '@vitest/coverage-istanbul': 5.0.1
+      '@vitest/coverage-v8': 5.0.1
+      '@vitest/ui': 5.0.1
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.4.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   web-namespaces@2.0.1:
     resolution:
       {
@@ -5246,6 +5753,14 @@ packages:
     engines: { node: '>= 8' }
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution:
+      {
+        integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==,
+      }
+    engines: { node: '>=8' }
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution:
       {
@@ -5533,6 +6048,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
+  '@jridgewell/sourcemap-codec@1.6.0': {}
+
   '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -5589,6 +6106,8 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@oxc-project/types@0.150.0': {}
+
   '@panva/hkdf@1.2.1': {}
 
   '@pkgr/core@0.2.9': {}
@@ -5999,6 +6518,53 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
+  '@rolldown/binding-android-arm-eabi@1.2.9':
+    optional: true
+
+  '@rolldown/binding-android-arm64@1.2.9':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.2.9':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.2.9':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.2.9':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.9':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.9':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.2.9':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.9':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.9':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.2.9':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.2.9':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.2.9':
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.9':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.2.9':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
   '@rtsao/scc@1.1.0': {}
 
   '@rushstack/eslint-patch@1.13.0': {}
@@ -6100,10 +6666,17 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.8
@@ -6298,6 +6871,17 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
+  '@vitest/mocker@5.0.1(vite@8.3.0(@types/node@20.19.21)(jiti@2.6.1))':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      '@vitest/spy': 5.0.1
+      estree-walker: 3.0.3
+      magic-string: 1.4.1
+    optionalDependencies:
+      vite: 8.3.0(@types/node@20.19.21)(jiti@2.6.1)
+
+  '@vitest/spy@5.0.1': {}
+
   '@volcengine/tos-sdk@2.7.5':
     dependencies:
       axios: 0.21.4(debug@4.4.3)
@@ -6409,6 +6993,8 @@ snapshots:
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
 
+  assertion-error@2.0.1: {}
+
   ast-types-flow@0.0.8: {}
 
   async-function@1.0.0: {}
@@ -6499,6 +7085,8 @@ snapshots:
 
   ccount@2.0.1: {}
 
+  chai@6.2.2: {}
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -6736,6 +7324,8 @@ snapshots:
       iterator.prototype: 1.1.5
       safe-array-concat: 1.1.3
 
+  es-module-lexer@2.3.2: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -6973,10 +7563,16 @@ snapshots:
 
   estree-util-is-identifier-name@3.0.0: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   esutils@2.0.3: {}
 
   eventemitter3@4.0.7: {}
 
+  expect-type@1.4.0: {}
+
   exsolve@1.0.7: {}
 
   extend-shallow@2.0.1:
@@ -7021,6 +7617,10 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fdir@6.5.0(picomatch@4.0.7):
+    optionalDependencies:
+      picomatch: 4.0.7
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -7057,6 +7657,9 @@ snapshots:
       hasown: 2.0.2
       mime-types: 2.1.35
 
+  fsevents@2.3.3:
+    optional: true
+
   function-bind@1.1.2: {}
 
   function.prototype.name@1.1.8:
@@ -7493,36 +8096,69 @@ snapshots:
     dependencies:
       immediate: 3.0.6
 
+  lightningcss-android-arm64@1.33.0:
+    optional: true
+
   lightningcss-darwin-arm64@1.30.1:
     optional: true
 
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
+
   lightningcss-darwin-x64@1.30.1:
     optional: true
 
+  lightningcss-darwin-x64@1.33.0:
+    optional: true
+
   lightningcss-freebsd-x64@1.30.1:
     optional: true
 
+  lightningcss-freebsd-x64@1.33.0:
+    optional: true
+
   lightningcss-linux-arm-gnueabihf@1.30.1:
     optional: true
 
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    optional: true
+
   lightningcss-linux-arm64-gnu@1.30.1:
     optional: true
 
+  lightningcss-linux-arm64-gnu@1.33.0:
+    optional: true
+
   lightningcss-linux-arm64-musl@1.30.1:
     optional: true
 
+  lightningcss-linux-arm64-musl@1.33.0:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.30.1:
     optional: true
 
+  lightningcss-linux-x64-gnu@1.33.0:
+    optional: true
+
   lightningcss-linux-x64-musl@1.30.1:
     optional: true
 
+  lightningcss-linux-x64-musl@1.33.0:
+    optional: true
+
   lightningcss-win32-arm64-msvc@1.30.1:
     optional: true
 
+  lightningcss-win32-arm64-msvc@1.33.0:
+    optional: true
+
   lightningcss-win32-x64-msvc@1.30.1:
     optional: true
 
+  lightningcss-win32-x64-msvc@1.33.0:
+    optional: true
+
   lightningcss@1.30.1:
     dependencies:
       detect-libc: 2.1.2
@@ -7538,6 +8174,22 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.30.1
       lightningcss-win32-x64-msvc: 1.30.1
 
+  lightningcss@1.33.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -7566,6 +8218,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magic-string@1.4.1:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+
   markdown-table@3.0.4: {}
 
   math-intrinsics@1.1.0: {}
@@ -7947,6 +8603,8 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  nanoid@3.3.19: {}
+
   napi-postinstall@0.3.4: {}
 
   natural-compare@1.4.0: {}
@@ -8050,6 +8708,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  obug@2.2.1: {}
+
   ohash@2.0.11: {}
 
   oidc-token-hash@5.1.1: {}
@@ -8126,6 +8786,8 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  picomatch@4.0.7: {}
+
   pkg-types@2.3.0:
     dependencies:
       confbox: 0.2.2
@@ -8140,6 +8802,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.28:
+    dependencies:
+      nanoid: 3.3.19
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
@@ -8356,6 +9024,27 @@ snapshots:
 
   reusify@1.1.0: {}
 
+  rolldown@1.2.9:
+    dependencies:
+      '@oxc-project/types': 0.150.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm-eabi': 1.2.9
+      '@rolldown/binding-android-arm64': 1.2.9
+      '@rolldown/binding-darwin-arm64': 1.2.9
+      '@rolldown/binding-darwin-x64': 1.2.9
+      '@rolldown/binding-freebsd-x64': 1.2.9
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.9
+      '@rolldown/binding-linux-arm64-gnu': 1.2.9
+      '@rolldown/binding-linux-arm64-musl': 1.2.9
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.9
+      '@rolldown/binding-linux-s390x-gnu': 1.2.9
+      '@rolldown/binding-linux-x64-gnu': 1.2.9
+      '@rolldown/binding-linux-x64-musl': 1.2.9
+      '@rolldown/binding-openharmony-arm64': 1.2.9
+      '@rolldown/binding-win32-arm64-msvc': 1.2.9
+      '@rolldown/binding-win32-x64-msvc': 1.2.9
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -8479,6 +9168,8 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  siginfo@2.0.0: {}
+
   source-map-js@1.2.1: {}
 
   space-separated-tokens@2.0.2: {}
@@ -8487,6 +9178,10 @@ snapshots:
 
   stable-hash@0.0.5: {}
 
+  stackback@0.0.2: {}
+
+  std-env@4.2.0: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -8594,13 +9289,22 @@ snapshots:
       minizlib: 3.1.0
       yallist: 5.0.0
 
+  tinybench@6.1.4: {}
+
   tinyexec@1.0.1: {}
 
+  tinyexec@1.3.0: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.7)
+      picomatch: 4.0.7
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -8777,6 +9481,39 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
+  vite@8.3.0(@types/node@20.19.21)(jiti@2.6.1):
+    dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.7
+      postcss: 8.5.28
+      rolldown: 1.2.9
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 20.19.21
+      fsevents: 2.3.3
+      jiti: 2.6.1
+
+  vitest@5.0.1(@types/node@20.19.21)(vite@8.3.0(@types/node@20.19.21)(jiti@2.6.1)):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/mocker': 5.0.1(vite@8.3.0(@types/node@20.19.21)(jiti@2.6.1))
+      chai: 6.2.2
+      es-module-lexer: 2.3.2
+      expect-type: 1.4.0
+      magic-string: 1.4.1
+      obug: 2.2.1
+      picomatch: 4.0.7
+      std-env: 4.2.0
+      tinybench: 6.1.4
+      tinyexec: 1.3.0
+      tinyglobby: 0.2.17
+      vite: 8.3.0(@types/node@20.19.21)(jiti@2.6.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 20.19.21
+    transitivePeerDependencies:
+      - msw
+
   web-namespaces@2.0.1: {}
 
   which-boxed-primitive@1.1.1:
@@ -8824,6 +9561,11 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   word-wrap@1.2.5: {}
 
   yallist@4.0.0: {}
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 961b974..24d7516 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -45,6 +45,8 @@ model Photo {
   category     Category @relation(fields: [categoryId], references: [id], onDelete: Cascade)
   uploader     User     @relation(fields: [uploaderId], references: [id])
   createdAt    DateTime @default(now())
+
+  @@index([categoryId, createdAt])
 }
 
 model ShareLink {
diff --git a/vitest.config.ts b/vitest.config.ts
index 62c18aa..27ec931 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,14 +1,13 @@
-import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-  plugins: [react()],
   test: {
-    environment: 'jsdom',
+    environment: 'node',
     globals: true,
-    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
+    include: ['**/*.{test,spec}.{js,ts}'],
     exclude: ['node_modules', '.next', 'dist', '.output'],
+    passWithNoTests: false,
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html'],