feat: 管理后台统一 PayPageLayout 布局，支持 dark mode

管理后台使用与充值页面相同的 PayPageLayout 组件，OrderTable 和
OrderDetail 组件新增 dark prop，所有样式支持暗色模式切换。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/admin/page.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect, useCallback, Suspense } from 'react';
 import OrderTable from '@/components/admin/OrderTable';
 import OrderDetail from '@/components/admin/OrderDetail';
 import PaginationBar from '@/components/PaginationBar';
+import PayPageLayout from '@/components/PayPageLayout';
 
 interface AdminOrder {
   id: string;
@@ -43,6 +44,10 @@ interface AdminOrderDetail extends AdminOrder {
 function AdminContent() {
   const searchParams = useSearchParams();
   const token = searchParams.get('token');
+  const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
+  const uiMode = searchParams.get('ui_mode') || 'standalone';
+  const isDark = theme === 'dark';
+  const isEmbedded = uiMode === 'embedded';
 
   const [orders, setOrders] = useState<AdminOrder[]>([]);
   const [total, setTotal] = useState(0);
@@ -88,8 +93,11 @@ function AdminContent() {
 
   if (!token) {
     return (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="text-red-500">缺少管理员凭证</div>
+      <div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
+        <div className="text-center text-red-500">
+          <p className="text-lg font-medium">缺少管理员凭证</p>
+          <p className="mt-2 text-sm text-gray-500">请从 Sub2API 平台正确访问管理页面</p>
+        </div>
       </div>
     );
   }
@@ -154,22 +162,29 @@ function AdminContent() {
   };
 
   return (
-    <div className="mx-auto min-h-screen max-w-6xl p-4">
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900">Sub2ApiPay 订单管理</h1>
+    <PayPageLayout
+      isDark={isDark}
+      isEmbedded={isEmbedded}
+      maxWidth="full"
+      title="订单管理"
+      subtitle="查看和管理所有充值订单"
+      actions={
         <button
           type="button"
           onClick={fetchOrders}
-          className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100"
+          className={[
+            'inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
+            isDark ? 'border-slate-600 text-slate-200 hover:bg-slate-800' : 'border-slate-300 text-slate-700 hover:bg-slate-100',
+          ].join(' ')}
         >
           刷新
         </button>
-      </div>
-
+      }
+    >
       {error && (
-        <div className="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-600">
+        <div className={`mb-4 rounded-lg border p-3 text-sm ${isDark ? 'border-red-800 bg-red-950/50 text-red-400' : 'border-red-200 bg-red-50 text-red-600'}`}>
           {error}
-          <button onClick={() => setError('')} className="ml-2 text-red-400 hover:text-red-600">
+          <button onClick={() => setError('')} className="ml-2 opacity-60 hover:opacity-100">
             ✕
           </button>
         </div>
@@ -184,9 +199,12 @@ function AdminContent() {
               setStatusFilter(s);
               setPage(1);
             }}
-            className={`rounded-full px-3 py-1 text-sm transition-colors ${
-              statusFilter === s ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
+            className={[
+              'rounded-full px-3 py-1 text-sm transition-colors',
+              statusFilter === s
+                ? (isDark ? 'bg-indigo-500/30 text-indigo-200 ring-1 ring-indigo-400/40' : 'bg-blue-600 text-white')
+                : (isDark ? 'bg-slate-800 text-slate-400 hover:bg-slate-700' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'),
+            ].join(' ')}
           >
             {statusLabels[s]}
           </button>
@@ -194,11 +212,11 @@ function AdminContent() {
       </div>
 
       {/* Table */}
-      <div className="rounded-xl bg-white shadow-sm">
+      <div className={['rounded-xl border', isDark ? 'border-slate-700 bg-slate-800/70' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
         {loading ? (
-          <div className="py-12 text-center text-gray-500">加载中...</div>
+          <div className={`py-12 text-center ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>加载中...</div>
         ) : (
-          <OrderTable orders={orders} onRetry={handleRetry} onCancel={handleCancel} onViewDetail={handleViewDetail} />
+          <OrderTable orders={orders} onRetry={handleRetry} onCancel={handleCancel} onViewDetail={handleViewDetail} dark={isDark} />
         )}
       </div>
 
@@ -210,11 +228,12 @@ function AdminContent() {
         loading={loading}
         onPageChange={(p) => setPage(p)}
         onPageSizeChange={(s) => { setPageSize(s); setPage(1); }}
+        isDark={isDark}
       />
 
       {/* Order Detail */}
-      {detailOrder && <OrderDetail order={detailOrder} onClose={() => setDetailOrder(null)} />}
-    </div>
+      {detailOrder && <OrderDetail order={detailOrder} onClose={() => setDetailOrder(null)} dark={isDark} />}
+    </PayPageLayout>
   );
 }