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={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
-        <div className="text-red-500">缺少管理员凭证</div>
+        <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">
+    <PayPageLayout
-      <div className="mb-6 flex items-center justify-between">
+      isDark={isDark}
-        <h1 className="text-2xl font-bold text-gray-900">Sub2ApiPay 订单管理</h1>
+      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 ${
+            className={[
-              statusFilter === s ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              '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)} />}
+      {detailOrder && <OrderDetail order={detailOrder} onClose={() => setDetailOrder(null)} dark={isDark} />}
-    </div>
+    </PayPageLayout>
   );
 }
 

src/components/admin/OrderDetail.tsx

@@ -39,9 +39,10 @@ interface OrderDetailProps {
     auditLogs: AuditLog[];
   };
   onClose: () => void;
+  dark?: boolean;
 }
 
-export default function OrderDetail({ order, onClose }: OrderDetailProps) {
+export default function OrderDetail({ order, onClose, dark }: OrderDetailProps) {
   const fields = [
     { label: '订单号', value: order.id },
     { label: '用户ID', value: order.userId },
@@ -78,46 +79,46 @@ export default function OrderDetail({ order, onClose }: OrderDetailProps) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
       <div
-        className="max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-6 shadow-xl"
+        className={`max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-xl p-6 shadow-xl ${dark ? 'bg-slate-800 text-slate-100' : 'bg-white'}`}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-4 flex items-center justify-between">
           <h3 className="text-lg font-bold">订单详情</h3>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+          <button onClick={onClose} className={dark ? 'text-slate-400 hover:text-slate-200' : 'text-gray-400 hover:text-gray-600'}>
             ✕
           </button>
         </div>
 
         <div className="grid grid-cols-2 gap-3">
           {fields.map(({ label, value }) => (
-            <div key={label} className="rounded-lg bg-gray-50 p-3">
+            <div key={label} className={`rounded-lg p-3 ${dark ? 'bg-slate-700/60' : 'bg-gray-50'}`}>
-              <div className="text-xs text-gray-500">{label}</div>
+              <div className={`text-xs ${dark ? 'text-slate-400' : 'text-gray-500'}`}>{label}</div>
-              <div className="mt-1 break-all text-sm font-medium">{value}</div>
+              <div className={`mt-1 break-all text-sm font-medium ${dark ? 'text-slate-200' : ''}`}>{value}</div>
             </div>
           ))}
         </div>
 
         {/* Audit Logs */}
         <div className="mt-6">
-          <h4 className="mb-3 font-medium text-gray-900">审计日志</h4>
+          <h4 className={`mb-3 font-medium ${dark ? 'text-slate-100' : 'text-gray-900'}`}>审计日志</h4>
           <div className="space-y-2">
             {order.auditLogs.map((log) => (
-              <div key={log.id} className="rounded-lg border border-gray-100 bg-gray-50 p-3">
+              <div key={log.id} className={`rounded-lg border p-3 ${dark ? 'border-slate-600 bg-slate-700/60' : 'border-gray-100 bg-gray-50'}`}>
                 <div className="flex items-center justify-between">
                   <span className="text-sm font-medium">{log.action}</span>
-                  <span className="text-xs text-gray-400">{new Date(log.createdAt).toLocaleString('zh-CN')}</span>
+                  <span className={`text-xs ${dark ? 'text-slate-500' : 'text-gray-400'}`}>{new Date(log.createdAt).toLocaleString('zh-CN')}</span>
                 </div>
-                {log.detail && <div className="mt-1 break-all text-xs text-gray-500">{log.detail}</div>}
+                {log.detail && <div className={`mt-1 break-all text-xs ${dark ? 'text-slate-400' : 'text-gray-500'}`}>{log.detail}</div>}
-                {log.operator && <div className="mt-1 text-xs text-gray-400">操作者: {log.operator}</div>}
+                {log.operator && <div className={`mt-1 text-xs ${dark ? 'text-slate-500' : 'text-gray-400'}`}>操作者: {log.operator}</div>}
               </div>
             ))}
-            {order.auditLogs.length === 0 && <div className="text-center text-sm text-gray-400">暂无日志</div>}
+            {order.auditLogs.length === 0 && <div className={`text-center text-sm ${dark ? 'text-slate-500' : 'text-gray-400'}`}>暂无日志</div>}
           </div>
         </div>
 
         <button
           onClick={onClose}
-          className="mt-6 w-full rounded-lg border border-gray-300 py-2 text-sm text-gray-600 hover:bg-gray-50"
+          className={`mt-6 w-full rounded-lg border py-2 text-sm ${dark ? 'border-slate-600 text-slate-300 hover:bg-slate-700' : 'border-gray-300 text-gray-600 hover:bg-gray-50'}`}
         >
           关闭
         </button>

src/components/admin/OrderTable.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useState } from 'react';
-
 interface Order {
   id: string;
   userId: number;
@@ -24,67 +22,72 @@ interface OrderTableProps {
   onRetry: (orderId: string) => void;
   onCancel: (orderId: string) => void;
   onViewDetail: (orderId: string) => void;
+  dark?: boolean;
 }
 
-const STATUS_LABELS: Record<string, { label: string; className: string }> = {
+const STATUS_LABELS: Record<string, { label: string; light: string; dark: string }> = {
-  PENDING: { label: '待支付', className: 'bg-yellow-100 text-yellow-800' },
+  PENDING: { label: '待支付', light: 'bg-yellow-100 text-yellow-800', dark: 'bg-yellow-500/20 text-yellow-300' },
-  PAID: { label: '已支付', className: 'bg-blue-100 text-blue-800' },
+  PAID: { label: '已支付', light: 'bg-blue-100 text-blue-800', dark: 'bg-blue-500/20 text-blue-300' },
-  RECHARGING: { label: '充值中', className: 'bg-blue-100 text-blue-800' },
+  RECHARGING: { label: '充值中', light: 'bg-blue-100 text-blue-800', dark: 'bg-blue-500/20 text-blue-300' },
-  COMPLETED: { label: '已完成', className: 'bg-green-100 text-green-800' },
+  COMPLETED: { label: '已完成', light: 'bg-green-100 text-green-800', dark: 'bg-green-500/20 text-green-300' },
-  EXPIRED: { label: '已超时', className: 'bg-gray-100 text-gray-800' },
+  EXPIRED: { label: '已超时', light: 'bg-gray-100 text-gray-800', dark: 'bg-slate-600/30 text-slate-400' },
-  CANCELLED: { label: '已取消', className: 'bg-gray-100 text-gray-800' },
+  CANCELLED: { label: '已取消', light: 'bg-gray-100 text-gray-800', dark: 'bg-slate-600/30 text-slate-400' },
-  FAILED: { label: '充值失败', className: 'bg-red-100 text-red-800' },
+  FAILED: { label: '充值失败', light: 'bg-red-100 text-red-800', dark: 'bg-red-500/20 text-red-300' },
-  REFUNDING: { label: '退款中', className: 'bg-orange-100 text-orange-800' },
+  REFUNDING: { label: '退款中', light: 'bg-orange-100 text-orange-800', dark: 'bg-orange-500/20 text-orange-300' },
-  REFUNDED: { label: '已退款', className: 'bg-purple-100 text-purple-800' },
+  REFUNDED: { label: '已退款', light: 'bg-purple-100 text-purple-800', dark: 'bg-purple-500/20 text-purple-300' },
-  REFUND_FAILED: { label: '退款失败', className: 'bg-red-100 text-red-800' },
+  REFUND_FAILED: { label: '退款失败', light: 'bg-red-100 text-red-800', dark: 'bg-red-500/20 text-red-300' },
 };
 
-export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }: OrderTableProps) {
+export default function OrderTable({ orders, onRetry, onCancel, onViewDetail, dark }: OrderTableProps) {
+  const thCls = `px-4 py-3 text-left text-xs font-medium uppercase ${dark ? 'text-slate-400' : 'text-gray-500'}`;
+  const tdMuted = `whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-400' : 'text-gray-500'}`;
+
   return (
     <div className="overflow-x-auto">
-      <table className="min-w-full divide-y divide-gray-200">
+      <table className={`min-w-full divide-y ${dark ? 'divide-slate-700' : 'divide-gray-200'}`}>
-        <thead className="bg-gray-50">
+        <thead className={dark ? 'bg-slate-800/50' : 'bg-gray-50'}>
           <tr>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">订单号</th>
+            <th className={thCls}>订单号</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">用户</th>
+            <th className={thCls}>用户</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">金额</th>
+            <th className={thCls}>金额</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">状态</th>
+            <th className={thCls}>状态</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">支付方式</th>
+            <th className={thCls}>支付方式</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">来源</th>
+            <th className={thCls}>来源</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">创建时间</th>
+            <th className={thCls}>创建时间</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">操作</th>
+            <th className={thCls}>操作</th>
           </tr>
         </thead>
-        <tbody className="divide-y divide-gray-200 bg-white">
+        <tbody className={`divide-y ${dark ? 'divide-slate-700/60' : 'divide-gray-200 bg-white'}`}>
           {orders.map((order) => {
             const statusInfo = STATUS_LABELS[order.status] || {
               label: order.status,
-              className: 'bg-gray-100 text-gray-800',
+              light: 'bg-gray-100 text-gray-800',
+              dark: 'bg-slate-600/30 text-slate-400',
             };
             return (
-              <tr key={order.id} className="hover:bg-gray-50">
+              <tr key={order.id} className={dark ? 'hover:bg-slate-700/40' : 'hover:bg-gray-50'}>
                 <td className="whitespace-nowrap px-4 py-3 text-sm">
-                  <button onClick={() => onViewDetail(order.id)} className="text-blue-600 hover:underline">
+                  <button onClick={() => onViewDetail(order.id)} className={dark ? 'text-indigo-400 hover:underline' : 'text-blue-600 hover:underline'}>
                     {order.id.slice(0, 12)}...
                   </button>
                 </td>
                 <td className="whitespace-nowrap px-4 py-3 text-sm">
-                  <div>{order.userName || '-'}</div>
+                  <div className={dark ? 'text-slate-200' : ''}>{order.userName || '-'}</div>
-                  <div className="text-xs text-gray-400">{order.userEmail || `ID: ${order.userId}`}</div>
+                  <div className={`text-xs ${dark ? 'text-slate-500' : 'text-gray-400'}`}>{order.userEmail || `ID: ${order.userId}`}</div>
                 </td>
-                <td className="whitespace-nowrap px-4 py-3 text-sm font-medium">¥{order.amount.toFixed(2)}</td>
+                <td className={`whitespace-nowrap px-4 py-3 text-sm font-medium ${dark ? 'text-slate-200' : ''}`}>¥{order.amount.toFixed(2)}</td>
                 <td className="whitespace-nowrap px-4 py-3 text-sm">
-                  <span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${statusInfo.className}`}>
+                  <span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${dark ? statusInfo.dark : statusInfo.light}`}>
                     {statusInfo.label}
                   </span>
                 </td>
-                <td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
+                <td className={tdMuted}>
                   {order.paymentType === 'alipay' ? '支付宝' : '微信支付'}
                 </td>
-                <td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
+                <td className={tdMuted}>
                   {order.srcHost || '-'}
                 </td>
-                <td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
+                <td className={tdMuted}>
                   {new Date(order.createdAt).toLocaleString('zh-CN')}
                 </td>
                 <td className="whitespace-nowrap px-4 py-3 text-sm">
@@ -92,7 +95,7 @@ export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }:
                     {order.rechargeRetryable && (
                       <button
                         onClick={() => onRetry(order.id)}
-                        className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-700 hover:bg-blue-200"
+                        className={`rounded px-2 py-1 text-xs ${dark ? 'bg-blue-500/20 text-blue-300 hover:bg-blue-500/30' : 'bg-blue-100 text-blue-700 hover:bg-blue-200'}`}
                       >
                         重试
                       </button>
@@ -100,7 +103,7 @@ export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }:
                     {order.status === 'PENDING' && (
                       <button
                         onClick={() => onCancel(order.id)}
-                        className="rounded bg-red-100 px-2 py-1 text-xs text-red-700 hover:bg-red-200"
+                        className={`rounded px-2 py-1 text-xs ${dark ? 'bg-red-500/20 text-red-300 hover:bg-red-500/30' : 'bg-red-100 text-red-700 hover:bg-red-200'}`}
                       >
                         取消
                       </button>
@@ -112,7 +115,7 @@ export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }:
           })}
         </tbody>
       </table>
-      {orders.length === 0 && <div className="py-12 text-center text-gray-500">暂无订单</div>}
+      {orders.length === 0 && <div className={`py-12 text-center ${dark ? 'text-slate-500' : 'text-gray-500'}`}>暂无订单</div>}
     </div>
   );
 }