fix: embedded 模式下也强制 min-h-screen，防止 dark 模式底部白底

fix: 移除 body 硬编码背景色，修复 dark 模式底部白底问题
perf: 添加 paid_at 索引优化 dashboard 查询性能
2026-03-04 21:55:43 +08:00 · 2026-03-04 21:23:48 +08:00 · 2026-03-04 20:08:58 +08:00 · 2026-03-04 20:07:49 +08:00 · 2026-03-04 19:06:25 +08:00 · 2026-03-04 18:11:14 +08:00
16 changed files with 1020 additions and 79 deletions
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
  "name": "sub2apipay",
  "version": "0.1.0",
  "private": true,
+  "packageManager": "pnpm@10.30.3",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
@@ -16,13 +17,13 @@
  "dependencies": {
    "@prisma/adapter-pg": "7.4.1",
    "@prisma/client": "^7.4.2",
-    "@stripe/react-stripe-js": "^5.6.1",
    "@stripe/stripe-js": "^8.9.0",
    "next": "16.1.6",
    "pg": "^8.19.0",
    "qrcode": "^1.5.4",
    "react": "19.2.3",
    "react-dom": "19.2.3",
+    "recharts": "^3.7.0",
    "stripe": "^20.4.0",
    "zod": "^4.3.6"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,6 @@ importers:
      '@prisma/client':
        specifier: ^7.4.2
        version: 7.4.2(prisma@7.4.1(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3))(typescript@5.9.3)
-      '@stripe/react-stripe-js':
-        specifier: ^5.6.1
-        version: 5.6.1(@stripe/stripe-js@8.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
      '@stripe/stripe-js':
        specifier: ^8.9.0
        version: 8.9.0
@@ -35,6 +32,9 @@ importers:
      react-dom:
        specifier: 19.2.3
        version: 19.2.3(react@19.2.3)
+      recharts:
+        specifier: ^3.7.0
+        version: 3.7.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react-is@16.13.1)(react@19.2.3)(redux@5.0.1)
      stripe:
        specifier: ^20.4.0
        version: 20.4.0(@types/node@20.19.35)
@@ -733,6 +733,17 @@ packages:
      react: ^18.0.0 || ^19.0.0
      react-dom: ^18.0.0 || ^19.0.0

+  '@reduxjs/toolkit@2.11.2':
+    resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
  '@rolldown/pluginutils@1.0.0-rc.3':
    resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}

@@ -880,12 +891,8 @@ packages:
  '@standard-schema/spec@1.1.0':
    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}

-  '@stripe/react-stripe-js@5.6.1':
-    resolution: {integrity: sha512-5xBrjkGmFvKvpMod6VvpOaFaa67eRbmieKeFTePZyOr/sUXzm7A3YY91l330pS0usUst5PxTZDUZHWfOc0v1GA==}
-    peerDependencies:
-      '@stripe/stripe-js': '>=8.0.0 <9.0.0'
-      react: '>=16.8.0 <20.0.0'
-      react-dom: '>=16.8.0 <20.0.0'
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}

  '@stripe/stripe-js@8.9.0':
    resolution: {integrity: sha512-OJkXvUI5GAc56QdiSRimQDvWYEqn475J+oj8RzRtFTCPtkJNO2TWW619oDY+nn1ExR+2tCVTQuRQBbR4dRugww==}
@@ -1004,6 +1011,33 @@ packages:
  '@types/chai@5.2.3':
    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}

+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
  '@types/deep-eql@4.0.2':
    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}

@@ -1033,6 +1067,9 @@ packages:
  '@types/react@19.2.14':
    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}

+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
  '@typescript-eslint/eslint-plugin@8.56.1':
    resolution: {integrity: sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1403,6 +1440,10 @@ packages:
  cliui@6.0.0:
    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}

+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
  color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@@ -1430,6 +1471,50 @@ packages:
  csstype@3.2.3:
    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}

+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
  damerau-levenshtein@1.0.8:
    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}

@@ -1466,6 +1551,9 @@ packages:
    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
    engines: {node: '>=0.10.0'}

+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
  deep-is@0.1.4:
    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}

@@ -1565,6 +1653,9 @@ packages:
    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
    engines: {node: '>= 0.4'}

+  es-toolkit@1.45.0:
+    resolution: {integrity: sha512-RArCX+Zea16+R1jg4mH223Z8p/ivbJjIkU3oC6ld2bdUfmDxiCkFYSi9zLOR2anucWJUeH4Djnzgd0im0nD3dw==}
+
  esbuild@0.27.3:
    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
    engines: {node: '>=18'}
@@ -1701,6 +1792,9 @@ packages:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
    engines: {node: '>=0.10.0'}

+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
  expect-type@1.3.0:
    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
    engines: {node: '>=12.0.0'}
@@ -1905,6 +1999,12 @@ packages:
    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
    engines: {node: '>= 4'}

+  immer@10.2.0:
+    resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
+
+  immer@11.1.4:
+    resolution: {integrity: sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==}
+
  import-fresh@3.3.1:
    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
    engines: {node: '>=6'}
@@ -1917,6 +2017,10 @@ packages:
    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
    engines: {node: '>= 0.4'}

+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
  is-array-buffer@3.0.5:
    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
    engines: {node: '>= 0.4'}
@@ -2509,6 +2613,18 @@ packages:
  react-is@16.13.1:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}

+  react-redux@9.2.0:
+    resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
  react-refresh@0.18.0:
    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
    engines: {node: '>=0.10.0'}
@@ -2521,6 +2637,22 @@ packages:
    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
    engines: {node: '>= 14.18.0'}

+  recharts@3.7.0:
+    resolution: {integrity: sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
  reflect.getprototypeof@1.0.10:
    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
    engines: {node: '>= 0.4'}
@@ -2542,6 +2674,9 @@ packages:
  require-main-filename@2.0.0:
    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}

+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
  resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@@ -2759,6 +2894,9 @@ packages:
    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
    engines: {node: '>=6'}

+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
  tinybench@2.9.0:
    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}

@@ -2841,6 +2979,11 @@ packages:
  uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}

+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
  valibot@1.2.0:
    resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
    peerDependencies:
@@ -2849,6 +2992,9 @@ packages:
      typescript:
        optional: true

+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
  vite@7.3.1:
    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -3549,6 +3695,18 @@ snapshots:
      react: 19.2.3
      react-dom: 19.2.3(react@19.2.3)

+  '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.3)(redux@5.0.1))(react@19.2.3)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.4
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+    optionalDependencies:
+      react: 19.2.3
+      react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.3)(redux@5.0.1)
+
  '@rolldown/pluginutils@1.0.0-rc.3': {}

  '@rollup/rollup-android-arm-eabi@4.59.0':
@@ -3630,12 +3788,7 @@ snapshots:

  '@standard-schema/spec@1.1.0': {}

-  '@stripe/react-stripe-js@5.6.1(@stripe/stripe-js@8.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
-    dependencies:
-      '@stripe/stripe-js': 8.9.0
-      prop-types: 15.8.1
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
+  '@standard-schema/utils@0.3.0': {}

  '@stripe/stripe-js@8.9.0': {}

@@ -3743,6 +3896,30 @@ snapshots:
      '@types/deep-eql': 4.0.2
      assertion-error: 2.0.1

+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
  '@types/deep-eql@4.0.2': {}

  '@types/estree@1.0.8': {}
@@ -3773,6 +3950,8 @@ snapshots:
    dependencies:
      csstype: 3.2.3

+  '@types/use-sync-external-store@0.0.6': {}
+
  '@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.2
@@ -4179,6 +4358,8 @@ snapshots:
      strip-ansi: 6.0.1
      wrap-ansi: 6.2.0

+  clsx@2.1.1: {}
+
  color-convert@2.0.1:
    dependencies:
      color-name: 1.1.4
@@ -4201,6 +4382,44 @@ snapshots:

  csstype@3.2.3: {}

+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
  damerau-levenshtein@1.0.8: {}

  data-view-buffer@1.0.2:
@@ -4231,6 +4450,8 @@ snapshots:

  decamelize@1.2.0: {}

+  decimal.js-light@2.5.1: {}
+
  deep-is@0.1.4: {}

  deepmerge-ts@7.1.5: {}
@@ -4390,6 +4611,8 @@ snapshots:
      is-date-object: 1.1.0
      is-symbol: 1.1.1

+  es-toolkit@1.45.0: {}
+
  esbuild@0.27.3:
    optionalDependencies:
      '@esbuild/aix-ppc64': 0.27.3
@@ -4428,8 +4651,8 @@ snapshots:
      '@next/eslint-plugin-next': 16.1.6
      eslint: 9.39.3(jiti@2.6.1)
      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.3(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.3(jiti@2.6.1))
      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.3(jiti@2.6.1))
      eslint-plugin-react: 7.37.5(eslint@9.39.3(jiti@2.6.1))
      eslint-plugin-react-hooks: 7.0.1(eslint@9.39.3(jiti@2.6.1))
@@ -4451,7 +4674,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.3(jiti@2.6.1)):
    dependencies:
      '@nolyfill/is-core-module': 1.0.39
      debug: 4.4.3
@@ -4462,22 +4685,22 @@ snapshots:
      tinyglobby: 0.2.15
      unrs-resolver: 1.11.1
    optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.3(jiti@2.6.1))
    transitivePeerDependencies:
      - supports-color

-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.3(jiti@2.6.1)):
    dependencies:
      debug: 3.2.7
    optionalDependencies:
      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
      eslint: 9.39.3(jiti@2.6.1)
      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.3(jiti@2.6.1))
    transitivePeerDependencies:
      - supports-color

-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.3(jiti@2.6.1)):
    dependencies:
      '@rtsao/scc': 1.1.0
      array-includes: 3.1.9
@@ -4488,7 +4711,7 @@ snapshots:
      doctrine: 2.1.0
      eslint: 9.39.3(jiti@2.6.1)
      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.3(jiti@2.6.1))
      hasown: 2.0.2
      is-core-module: 2.16.1
      is-glob: 4.0.3
@@ -4632,6 +4855,8 @@ snapshots:

  esutils@2.0.3: {}

+  eventemitter3@5.0.4: {}
+
  expect-type@1.3.0: {}

  exsolve@1.0.8: {}
@@ -4826,6 +5051,10 @@ snapshots:

  ignore@7.0.5: {}

+  immer@10.2.0: {}
+
+  immer@11.1.4: {}
+
  import-fresh@3.3.1:
    dependencies:
      parent-module: 1.0.1
@@ -4839,6 +5068,8 @@ snapshots:
      hasown: 2.0.2
      side-channel: 1.1.0

+  internmap@2.0.3: {}
+
  is-array-buffer@3.0.5:
    dependencies:
      call-bind: 1.0.8
@@ -5401,12 +5632,47 @@ snapshots:

  react-is@16.13.1: {}

+  react-redux@9.2.0(@types/react@19.2.14)(react@19.2.3)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      redux: 5.0.1
+
  react-refresh@0.18.0: {}

  react@19.2.3: {}

  readdirp@4.1.2: {}

+  recharts@3.7.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react-is@16.13.1)(react@19.2.3)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.3)(redux@5.0.1))(react@19.2.3)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.45.0
+      eventemitter3: 5.0.4
+      immer: 10.2.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-is: 16.13.1
+      react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.3)(redux@5.0.1)
+      reselect: 5.1.1
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
  reflect.getprototypeof@1.0.10:
    dependencies:
      call-bind: 1.0.8
@@ -5435,6 +5701,8 @@ snapshots:

  require-main-filename@2.0.0: {}

+  reselect@5.1.1: {}
+
  resolve-from@4.0.0: {}

  resolve-pkg-maps@1.0.0: {}
@@ -5720,6 +5988,8 @@ snapshots:

  tapable@2.3.0: {}

+  tiny-invariant@1.3.3: {}
+
  tinybench@2.9.0: {}

  tinyexec@1.0.2: {}
@@ -5841,10 +6111,31 @@ snapshots:
    dependencies:
      punycode: 2.3.1

+  use-sync-external-store@1.6.0(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
  valibot@1.2.0(typescript@5.9.3):
    optionalDependencies:
      typescript: 5.9.3

+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
  vite@7.3.1(@types/node@20.19.35)(jiti@2.6.1)(lightningcss@1.31.1):
    dependencies:
      esbuild: 0.27.3
--- a/prisma/migrations/20260304000000_add_paid_at_index/migration.sql
+++ b/prisma/migrations/20260304000000_add_paid_at_index/migration.sql
@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "orders_paid_at_idx" ON "orders"("paid_at");
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -46,6 +46,7 @@ model Order {
  @@index([status])
  @@index([expiresAt])
  @@index([createdAt])
+  @@index([paidAt])
  @@map("orders")
 }

--- a/src/app/admin/dashboard/page.tsx
+++ b/src/app/admin/dashboard/page.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useState, useEffect, useCallback, Suspense } from 'react';
+import PayPageLayout from '@/components/PayPageLayout';
+import DashboardStats from '@/components/admin/DashboardStats';
+import DailyChart from '@/components/admin/DailyChart';
+import Leaderboard from '@/components/admin/Leaderboard';
+import PaymentMethodChart from '@/components/admin/PaymentMethodChart';
+
+interface DashboardData {
+  summary: {
+    today: { amount: number; orderCount: number; paidCount: number };
+    total: { amount: number; orderCount: number; paidCount: number };
+    successRate: number;
+    avgAmount: number;
+  };
+  dailySeries: { date: string; amount: number; count: number }[];
+  leaderboard: { userId: number; userName: string | null; userEmail: string | null; totalAmount: number; orderCount: number }[];
+  paymentMethods: { paymentType: string; amount: number; count: number; percentage: number }[];
+  meta: { days: number; generatedAt: string };
+}
+
+const DAYS_OPTIONS = [7, 30, 90] as const;
+
+function DashboardContent() {
+  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 [days, setDays] = useState<number>(30);
+  const [data, setData] = useState<DashboardData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const fetchData = useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    setError('');
+    try {
+      const res = await fetch(`/api/admin/dashboard?token=${encodeURIComponent(token)}&days=${days}`);
+      if (!res.ok) {
+        if (res.status === 401) {
+          setError('管理员凭证无效');
+          return;
+        }
+        throw new Error('请求失败');
+      }
+      setData(await res.json());
+    } catch {
+      setError('加载数据失败');
+    } finally {
+      setLoading(false);
+    }
+  }, [token, days]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  if (!token) {
+    return (
+      <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>
+    );
+  }
+
+  const navParams = new URLSearchParams();
+  navParams.set('token', token);
+  if (theme === 'dark') navParams.set('theme', 'dark');
+  if (isEmbedded) navParams.set('ui_mode', 'embedded');
+
+  const btnBase = [
+    '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(' ');
+
+  const btnActive = [
+    'inline-flex items-center rounded-lg px-3 py-1.5 text-xs font-medium',
+    isDark ? 'bg-indigo-500/30 text-indigo-200 ring-1 ring-indigo-400/40' : 'bg-blue-600 text-white',
+  ].join(' ');
+
+  return (
+    <PayPageLayout
+      isDark={isDark}
+      isEmbedded={isEmbedded}
+      maxWidth="full"
+      title="数据概览"
+      subtitle="充值订单统计与分析"
+      actions={
+        <>
+          {DAYS_OPTIONS.map((d) => (
+            <button
+              key={d}
+              type="button"
+              onClick={() => setDays(d)}
+              className={days === d ? btnActive : btnBase}
+            >
+              {d}天
+            </button>
+          ))}
+          <a href={`/admin?${navParams}`} className={btnBase}>
+            订单管理
+          </a>
+          <button type="button" onClick={fetchData} className={btnBase}>
+            刷新
+          </button>
+        </>
+      }
+    >
+      {error && (
+        <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 opacity-60 hover:opacity-100">
+            ✕
+          </button>
+        </div>
+      )}
+
+      {loading ? (
+        <div className={`py-24 text-center ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>加载中...</div>
+      ) : data ? (
+        <div className="space-y-6">
+          <DashboardStats summary={data.summary} dark={isDark} />
+          <DailyChart data={data.dailySeries} dark={isDark} />
+          <div className="grid gap-6 lg:grid-cols-2">
+            <Leaderboard data={data.leaderboard} dark={isDark} />
+            <PaymentMethodChart data={data.paymentMethods} dark={isDark} />
+          </div>
+        </div>
+      ) : null}
+    </PayPageLayout>
+  );
+}
+
+export default function DashboardPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center">
+          <div className="text-gray-500">加载中...</div>
+        </div>
+      }
+    >
+      <DashboardContent />
+    </Suspense>
+  );
+}
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -162,6 +162,16 @@ function AdminContent() {
    REFUNDED: '已退款',
  };

+  const navParams = new URLSearchParams();
+  if (token) navParams.set('token', token);
+  if (isDark) navParams.set('theme', 'dark');
+  if (isEmbedded) navParams.set('ui_mode', 'embedded');
+
+  const btnBase = [
+    '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(' ');
+
  return (
    <PayPageLayout
      isDark={isDark}
@@ -170,16 +180,14 @@ function AdminContent() {
      title="订单管理"
      subtitle="查看和管理所有充值订单"
      actions={
-        <button
-          type="button"
-          onClick={fetchOrders}
-          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>
+        <>
+          <a href={`/admin/dashboard?${navParams}`} className={btnBase}>
+            数据概览
+          </a>
+          <button type="button" onClick={fetchOrders} className={btnBase}>
+            刷新
+          </button>
+        </>
      }
    >
      {error && (
--- a/src/app/api/admin/dashboard/route.ts
+++ b/src/app/api/admin/dashboard/route.ts
@@ -0,0 +1,139 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { prisma } from '@/lib/db';
+import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
+import { OrderStatus } from '@prisma/client';
+
+/** 格式化 Date 为 YYYY-MM-DD（使用本地时区，与 PostgreSQL DATE() 一致） */
+function toDateStr(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+export async function GET(request: NextRequest) {
+  if (!(await verifyAdminToken(request))) return unauthorizedResponse();
+
+  const searchParams = request.nextUrl.searchParams;
+  const days = Math.min(365, Math.max(1, Number(searchParams.get('days') || '30')));
+
+  const now = new Date();
+  const startDate = new Date(now);
+  startDate.setDate(startDate.getDate() - days);
+  startDate.setHours(0, 0, 0, 0);
+
+  const todayStart = new Date(now);
+  todayStart.setHours(0, 0, 0, 0);
+
+  const paidStatuses: OrderStatus[] = [
+    OrderStatus.PAID,
+    OrderStatus.RECHARGING,
+    OrderStatus.COMPLETED,
+    OrderStatus.REFUNDING,
+    OrderStatus.REFUNDED,
+    OrderStatus.REFUND_FAILED,
+  ];
+
+  const [todayStats, totalStats, todayOrders, totalOrders, dailyRaw, leaderboardRaw, paymentMethodStats] =
+    await Promise.all([
+      // Today paid aggregate
+      prisma.order.aggregate({
+        where: { status: { in: paidStatuses }, paidAt: { gte: todayStart } },
+        _sum: { amount: true },
+        _count: { _all: true },
+      }),
+      // Total paid aggregate
+      prisma.order.aggregate({
+        where: { status: { in: paidStatuses } },
+        _sum: { amount: true },
+        _count: { _all: true },
+      }),
+      // Today total orders
+      prisma.order.count({ where: { createdAt: { gte: todayStart } } }),
+      // Total orders
+      prisma.order.count(),
+      // Daily series (raw query for DATE truncation)
+      prisma.$queryRaw<{ date: string; amount: string; count: bigint }[]>`
+        SELECT DATE(paid_at) as date, SUM(amount)::text as amount, COUNT(*) as count
+        FROM orders
+        WHERE status IN ('PAID', 'RECHARGING', 'COMPLETED', 'REFUNDING', 'REFUNDED', 'REFUND_FAILED')
+          AND paid_at >= ${startDate}
+        GROUP BY DATE(paid_at)
+        ORDER BY date
+      `,
+      // Leaderboard: GROUP BY user_id only, MAX() for name/email to avoid splitting rows on name changes
+      prisma.$queryRaw<
+        { user_id: number; user_name: string | null; user_email: string | null; total_amount: string; order_count: bigint }[]
+      >`
+        SELECT user_id, MAX(user_name) as user_name, MAX(user_email) as user_email,
+               SUM(amount)::text as total_amount, COUNT(*) as order_count
+        FROM orders
+        WHERE status IN ('PAID', 'RECHARGING', 'COMPLETED', 'REFUNDING', 'REFUNDED', 'REFUND_FAILED')
+          AND paid_at >= ${startDate}
+        GROUP BY user_id
+        ORDER BY SUM(amount) DESC
+        LIMIT 10
+      `,
+      // Payment method distribution (within time range)
+      prisma.order.groupBy({
+        by: ['paymentType'],
+        where: { status: { in: paidStatuses }, paidAt: { gte: startDate } },
+        _sum: { amount: true },
+        _count: { _all: true },
+      }),
+    ]);
+
+  // Fill missing dates for continuous line chart (use local timezone consistently)
+  const dailyMap = new Map<string, { amount: number; count: number }>();
+  for (const row of dailyRaw) {
+    const dateStr = typeof row.date === 'string' ? row.date : toDateStr(new Date(row.date));
+    dailyMap.set(dateStr, { amount: Number(row.amount), count: Number(row.count) });
+  }
+
+  const dailySeries: { date: string; amount: number; count: number }[] = [];
+  const cursor = new Date(startDate);
+  while (cursor <= now) {
+    const dateStr = toDateStr(cursor);
+    const entry = dailyMap.get(dateStr);
+    dailySeries.push({ date: dateStr, amount: entry?.amount ?? 0, count: entry?.count ?? 0 });
+    cursor.setDate(cursor.getDate() + 1);
+  }
+
+  // Calculate summary
+  const todayPaidAmount = Number(todayStats._sum?.amount || 0);
+  const todayPaidCount = todayStats._count._all;
+  const totalPaidAmount = Number(totalStats._sum?.amount || 0);
+  const totalPaidCount = totalStats._count._all;
+  const successRate = totalOrders > 0 ? (totalPaidCount / totalOrders) * 100 : 0;
+  const avgAmount = totalPaidCount > 0 ? totalPaidAmount / totalPaidCount : 0;
+
+  // Payment method total for percentage calc
+  const paymentTotal = paymentMethodStats.reduce((sum, m) => sum + Number(m._sum?.amount || 0), 0);
+
+  return NextResponse.json({
+    summary: {
+      today: { amount: todayPaidAmount, orderCount: todayOrders, paidCount: todayPaidCount },
+      total: { amount: totalPaidAmount, orderCount: totalOrders, paidCount: totalPaidCount },
+      successRate: Math.round(successRate * 10) / 10,
+      avgAmount: Math.round(avgAmount * 100) / 100,
+    },
+    dailySeries,
+    leaderboard: leaderboardRaw.map((row) => ({
+      userId: row.user_id,
+      userName: row.user_name,
+      userEmail: row.user_email,
+      totalAmount: Number(row.total_amount),
+      orderCount: Number(row.order_count),
+    })),
+    paymentMethods: paymentMethodStats.map((m) => {
+      const amount = Number(m._sum?.amount || 0);
+      return {
+        paymentType: m.paymentType,
+        amount,
+        count: m._count._all,
+        percentage: paymentTotal > 0 ? Math.round((amount / paymentTotal) * 1000) / 10 : 0,
+      };
+    }),
+    meta: { days, generatedAt: now.toISOString() },
+  });
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="zh-CN">
-      <body className="bg-gray-50 text-gray-900 antialiased">{children}</body>
+      <body className="antialiased">{children}</body>
    </html>
  );
 }
--- a/src/app/pay/result/page.tsx
+++ b/src/app/pay/result/page.tsx
@@ -64,7 +64,7 @@ function ResultContent() {

  if (loading) {
    return (
-      <div className="flex min-h-screen items-center justify-center">
+      <div className="flex min-h-screen items-center justify-center bg-slate-50">
        <div className="text-gray-500">查询支付结果中...</div>
      </div>
    );
@@ -73,7 +73,7 @@ function ResultContent() {
  const isPending = status === 'PENDING';

  return (
-    <div className="flex min-h-screen items-center justify-center p-4">
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 p-4">
      <div className="w-full max-w-md rounded-xl bg-white p-8 text-center shadow-lg">
        {isSuccess ? (
          <>
@@ -147,7 +147,7 @@ export default function PayResultPage() {
  return (
    <Suspense
      fallback={
-        <div className="flex min-h-screen items-center justify-center">
+        <div className="flex min-h-screen items-center justify-center bg-slate-50">
          <div className="text-gray-500">加载中...</div>
        </div>
      }
--- a/src/app/pay/stripe-popup/page.tsx
+++ b/src/app/pay/stripe-popup/page.tsx
@@ -3,22 +3,20 @@
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useState, useCallback, Suspense } from 'react';

-// Methods that can be confirmed directly without Payment Element
-const DIRECT_CONFIRM_METHODS: Record<string, string> = {
-  alipay: 'confirmAlipayPayment',
-};
-
 function StripePopupContent() {
  const searchParams = useSearchParams();
  const orderId = searchParams.get('order_id') || '';
-  const clientSecret = searchParams.get('client_secret') || '';
-  const pk = searchParams.get('pk') || '';
  const amount = parseFloat(searchParams.get('amount') || '0') || 0;
  const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
  const method = searchParams.get('method') || '';
  const isDark = theme === 'dark';
-  const hasMissingParams = !orderId || !clientSecret || !pk;
+  const isAlipay = method === 'alipay';

+  // Sensitive data received via postMessage from parent, NOT from URL
+  const [credentials, setCredentials] = useState<{
+    clientSecret: string;
+    publishableKey: string;
+  } | null>(null);
  const [stripeLoaded, setStripeLoaded] = useState(false);
  const [stripeSubmitting, setStripeSubmitting] = useState(false);
  const [stripeError, setStripeError] = useState('');
@@ -28,8 +26,6 @@ function StripePopupContent() {
    elements: import('@stripe/stripe-js').StripeElements;
  } | null>(null);

-  const directConfirmMethod = DIRECT_CONFIRM_METHODS[method];
-
  const buildReturnUrl = useCallback(() => {
    const returnUrl = new URL(window.location.href);
    returnUrl.pathname = '/pay/result';
@@ -40,12 +36,32 @@ function StripePopupContent() {
    return returnUrl.toString();
  }, [orderId]);

-  // Initialize Stripe and auto-confirm for direct methods (e.g. Alipay)
+  // Listen for credentials from parent window via postMessage
  useEffect(() => {
-    if (hasMissingParams) return;
+    const handler = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== 'STRIPE_POPUP_INIT') return;
+      const { clientSecret, publishableKey } = event.data;
+      if (clientSecret && publishableKey) {
+        setCredentials({ clientSecret, publishableKey });
+      }
+    };
+    window.addEventListener('message', handler);
+    // Signal parent that popup is ready to receive data
+    if (window.opener) {
+      window.opener.postMessage({ type: 'STRIPE_POPUP_READY' }, window.location.origin);
+    }
+    return () => window.removeEventListener('message', handler);
+  }, []);
+
+  // Initialize Stripe once credentials are received
+  useEffect(() => {
+    if (!credentials) return;
    let cancelled = false;
+    const { clientSecret, publishableKey } = credentials;
+
    import('@stripe/stripe-js').then(({ loadStripe }) => {
-      loadStripe(pk).then((stripe) => {
+      loadStripe(publishableKey).then((stripe) => {
        if (cancelled || !stripe) {
          if (!cancelled) {
            setStripeError('支付组件加载失败，请关闭窗口重试');
@@ -54,21 +70,18 @@ function StripePopupContent() {
          return;
        }

-        if (directConfirmMethod) {
-          // Direct confirm (e.g. Alipay) — immediately redirect, no Payment Element needed
-          const confirmFn = (stripe as unknown as Record<string, Function>)[directConfirmMethod];
-          if (typeof confirmFn === 'function') {
-            confirmFn.call(stripe, clientSecret, {
-              return_url: buildReturnUrl(),
-            }).then((result: { error?: { message?: string } }) => {
-              if (cancelled) return;
-              if (result.error) {
-                setStripeError(result.error.message || '支付失败，请重试');
-                setStripeLoaded(true);
-              }
-              // If no error, the page has already been redirected
-            });
-          }
+        if (isAlipay) {
+          // Alipay: confirm directly and redirect, no Payment Element needed
+          stripe.confirmAlipayPayment(clientSecret, {
+            return_url: buildReturnUrl(),
+          }).then((result) => {
+            if (cancelled) return;
+            if (result.error) {
+              setStripeError(result.error.message || '支付失败，请重试');
+              setStripeLoaded(true);
+            }
+            // If no error, the page has already been redirected
+          });
          return;
        }

@@ -85,9 +98,9 @@ function StripePopupContent() {
      });
    });
    return () => { cancelled = true; };
-  }, [pk, clientSecret, isDark, directConfirmMethod, hasMissingParams, buildReturnUrl]);
+  }, [credentials, isDark, isAlipay, buildReturnUrl]);

-  // Mount Payment Element (only for non-direct methods)
+  // Mount Payment Element (only for non-alipay methods)
  const stripeContainerRef = useCallback(
    (node: HTMLDivElement | null) => {
      if (!node || !stripeLib) return;
@@ -134,20 +147,24 @@ function StripePopupContent() {
    return () => clearTimeout(timer);
  }, [stripeSuccess]);

-  // Missing params — show error (after all hooks)
-  if (hasMissingParams) {
+  // Waiting for credentials from parent
+  if (!credentials) {
    return (
-      <div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950 text-white' : '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">请从支付页面正常打开此窗口</p>
+      <div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
+        <div className={`w-full max-w-md space-y-4 rounded-2xl border p-6 ${isDark ? 'border-slate-700 bg-slate-900' : 'border-slate-200 bg-white'} shadow-lg`}>
+          <div className="flex items-center justify-center py-8">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-[#635bff] border-t-transparent" />
+            <span className={`ml-3 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              正在初始化...
+            </span>
+          </div>
        </div>
      </div>
    );
  }

-  // For direct confirm methods, show a loading/redirecting state
-  if (directConfirmMethod) {
+  // Alipay direct confirm: show loading/redirecting state
+  if (isAlipay) {
    return (
      <div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
        <div className={`w-full max-w-md space-y-4 rounded-2xl border p-6 ${isDark ? 'border-slate-700 bg-slate-900' : 'border-slate-200 bg-white'} shadow-lg`}>
--- a/src/components/PayPageLayout.tsx
+++ b/src/components/PayPageLayout.tsx
@@ -25,7 +25,7 @@ export default function PayPageLayout({
    <div
      className={[
        'relative w-full overflow-hidden',
-        isEmbedded ? 'p-2' : 'min-h-screen p-3 sm:p-4',
+        isEmbedded ? 'min-h-screen p-2' : 'min-h-screen p-3 sm:p-4',
        isDark ? 'bg-slate-950 text-slate-100' : 'bg-slate-100 text-slate-900',
      ].join(' ')}
    >
--- a/src/components/PaymentQRCode.tsx
+++ b/src/components/PaymentQRCode.tsx
@@ -177,6 +177,7 @@ export default function PaymentQRCode({
    const { stripe, elements } = stripeLib;
    const returnUrl = new URL(window.location.href);
    returnUrl.pathname = '/pay/result';
+    returnUrl.search = '';
    returnUrl.searchParams.set('order_id', orderId);
    returnUrl.searchParams.set('status', 'success');

@@ -202,12 +203,11 @@ export default function PaymentQRCode({
  const handleOpenPopup = () => {
    if (!clientSecret || !stripePublishableKey) return;
    setPopupBlocked(false);
+    // Only pass display params in URL — sensitive data sent via postMessage
    const popupUrl = new URL(window.location.href);
    popupUrl.pathname = '/pay/stripe-popup';
    popupUrl.search = '';
    popupUrl.searchParams.set('order_id', orderId);
-    popupUrl.searchParams.set('client_secret', clientSecret);
-    popupUrl.searchParams.set('pk', stripePublishableKey);
    popupUrl.searchParams.set('amount', String(amount));
    popupUrl.searchParams.set('theme', dark ? 'dark' : 'light');
    popupUrl.searchParams.set('method', stripePaymentMethod);
@@ -219,7 +219,19 @@ export default function PaymentQRCode({
    );
    if (!popup || popup.closed) {
      setPopupBlocked(true);
+      return;
    }
+    // Send sensitive data via postMessage after popup loads
+    const onReady = (event: MessageEvent) => {
+      if (event.source !== popup || event.data?.type !== 'STRIPE_POPUP_READY') return;
+      window.removeEventListener('message', onReady);
+      popup.postMessage({
+        type: 'STRIPE_POPUP_INIT',
+        clientSecret,
+        publishableKey: stripePublishableKey,
+      }, window.location.origin);
+    };
+    window.addEventListener('message', onReady);
  };

  useEffect(() => {
--- a/src/components/admin/DailyChart.tsx
+++ b/src/components/admin/DailyChart.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
+
+interface DailyData {
+  date: string;
+  amount: number;
+  count: number;
+}
+
+interface DailyChartProps {
+  data: DailyData[];
+  dark?: boolean;
+}
+
+function formatDate(dateStr: string) {
+  const [, m, d] = dateStr.split('-');
+  return `${m}/${d}`;
+}
+
+function formatAmount(value: number) {
+  if (value >= 10000) return `¥${(value / 10000).toFixed(1)}w`;
+  if (value >= 1000) return `¥${(value / 1000).toFixed(1)}k`;
+  return `¥${value}`;
+}
+
+interface TooltipPayload {
+  value: number;
+  dataKey: string;
+}
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+  dark,
+}: {
+  active?: boolean;
+  payload?: TooltipPayload[];
+  label?: string;
+  dark?: boolean;
+}) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div
+      className={[
+        'rounded-lg border px-3 py-2 text-sm shadow-lg',
+        dark ? 'border-slate-600 bg-slate-800 text-slate-200' : 'border-slate-200 bg-white text-slate-800',
+      ].join(' ')}
+    >
+      <p className={['mb-1 text-xs', dark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>{label}</p>
+      {payload.map((p) => (
+        <p key={p.dataKey}>
+          {p.dataKey === 'amount' ? '金额' : '笔数'}: {p.dataKey === 'amount' ? `¥${p.value.toLocaleString()}` : p.value}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+export default function DailyChart({ data, dark }: DailyChartProps) {
+  // Auto-calculate tick interval: show ~10-15 labels max
+  const tickInterval = data.length > 30 ? Math.ceil(data.length / 12) - 1 : 0;
+  if (data.length === 0) {
+    return (
+      <div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
+        <h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>每日充值趋势</h3>
+        <p className={['text-center text-sm py-16', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>暂无数据</p>
+      </div>
+    );
+  }
+
+  const axisColor = dark ? '#64748b' : '#94a3b8';
+  const gridColor = dark ? '#334155' : '#e2e8f0';
+
+  return (
+    <div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
+      <h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>每日充值趋势</h3>
+      <ResponsiveContainer width="100%" height={320}>
+        <LineChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 10 }}>
+          <CartesianGrid stroke={gridColor} strokeDasharray="3 3" />
+          <XAxis
+            dataKey="date"
+            tickFormatter={formatDate}
+            tick={{ fill: axisColor, fontSize: 12 }}
+            axisLine={{ stroke: gridColor }}
+            tickLine={false}
+            interval={tickInterval}
+          />
+          <YAxis
+            tickFormatter={formatAmount}
+            tick={{ fill: axisColor, fontSize: 12 }}
+            axisLine={{ stroke: gridColor }}
+            tickLine={false}
+            width={60}
+          />
+          <Tooltip content={<CustomTooltip dark={dark} />} />
+          <Line
+            type="monotone"
+            dataKey="amount"
+            stroke={dark ? '#818cf8' : '#4f46e5'}
+            strokeWidth={2}
+            dot={{ r: 3, fill: dark ? '#818cf8' : '#4f46e5' }}
+            activeDot={{ r: 5 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
--- a/src/components/admin/DashboardStats.tsx
+++ b/src/components/admin/DashboardStats.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+interface Summary {
+  today: { amount: number; orderCount: number; paidCount: number };
+  total: { amount: number; orderCount: number; paidCount: number };
+  successRate: number;
+  avgAmount: number;
+}
+
+interface DashboardStatsProps {
+  summary: Summary;
+  dark?: boolean;
+}
+
+export default function DashboardStats({ summary, dark }: DashboardStatsProps) {
+  const cards = [
+    { label: '今日充值', value: `¥${summary.today.amount.toLocaleString()}`, accent: true },
+    { label: '今日订单', value: `${summary.today.paidCount}/${summary.today.orderCount}` },
+    { label: '累计充值', value: `¥${summary.total.amount.toLocaleString()}`, accent: true },
+    { label: '累计订单', value: String(summary.total.paidCount) },
+    { label: '成功率', value: `${summary.successRate}%` },
+    { label: '平均充值', value: `¥${summary.avgAmount.toFixed(2)}` },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+      {cards.map((card) => (
+        <div
+          key={card.label}
+          className={[
+            'rounded-xl border p-4',
+            dark
+              ? 'border-slate-700 bg-slate-800/60'
+              : 'border-slate-200 bg-white shadow-sm',
+          ].join(' ')}
+        >
+          <p className={['text-xs font-medium', dark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>
+            {card.label}
+          </p>
+          <p
+            className={[
+              'mt-1 text-xl font-semibold tracking-tight',
+              card.accent
+                ? dark
+                  ? 'text-indigo-400'
+                  : 'text-indigo-600'
+                : dark
+                  ? 'text-slate-100'
+                  : 'text-slate-900',
+            ].join(' ')}
+          >
+            {card.value}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/src/components/admin/Leaderboard.tsx
+++ b/src/components/admin/Leaderboard.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+interface LeaderboardEntry {
+  userId: number;
+  userName: string | null;
+  userEmail: string | null;
+  totalAmount: number;
+  orderCount: number;
+}
+
+interface LeaderboardProps {
+  data: LeaderboardEntry[];
+  dark?: boolean;
+}
+
+const RANK_STYLES: Record<number, { light: string; dark: string }> = {
+  1: { light: 'bg-amber-100 text-amber-700', dark: 'bg-amber-500/20 text-amber-300' },
+  2: { light: 'bg-slate-200 text-slate-600', dark: 'bg-slate-500/20 text-slate-300' },
+  3: { light: 'bg-orange-100 text-orange-700', dark: 'bg-orange-500/20 text-orange-300' },
+};
+
+export default function Leaderboard({ data, dark }: LeaderboardProps) {
+  const thCls = `px-4 py-3 text-left text-xs font-medium uppercase ${dark ? 'text-slate-400' : 'text-gray-500'}`;
+  const tdCls = `whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-300' : 'text-slate-700'}`;
+  const tdMuted = `whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-400' : 'text-gray-500'}`;
+
+  if (data.length === 0) {
+    return (
+      <div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
+        <h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>充值排行榜 (Top 10)</h3>
+        <p className={['text-center text-sm py-8', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>暂无数据</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={['rounded-xl border', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
+      <h3 className={['px-6 pt-5 pb-2 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>
+        充值排行榜 (Top 10)
+      </h3>
+      <div className="overflow-x-auto">
+        <table className={`min-w-full divide-y ${dark ? 'divide-slate-700' : 'divide-gray-200'}`}>
+          <thead className={dark ? 'bg-slate-800/50' : 'bg-gray-50'}>
+            <tr>
+              <th className={thCls}>#</th>
+              <th className={thCls}>用户</th>
+              <th className={thCls}>累计金额</th>
+              <th className={thCls}>订单数</th>
+            </tr>
+          </thead>
+          <tbody className={`divide-y ${dark ? 'divide-slate-700/60' : 'divide-gray-200'}`}>
+            {data.map((entry, i) => {
+              const rank = i + 1;
+              const rankStyle = RANK_STYLES[rank];
+              return (
+                <tr key={entry.userId} className={dark ? 'hover:bg-slate-700/40' : 'hover:bg-gray-50'}>
+                  <td className="whitespace-nowrap px-4 py-3 text-sm">
+                    {rankStyle ? (
+                      <span className={`inline-flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold ${dark ? rankStyle.dark : rankStyle.light}`}>
+                        {rank}
+                      </span>
+                    ) : (
+                      <span className={dark ? 'text-slate-500' : 'text-gray-400'}>{rank}</span>
+                    )}
+                  </td>
+                  <td className={tdCls}>
+                    <div>{entry.userName || `#${entry.userId}`}</div>
+                    {entry.userEmail && (
+                      <div className={['text-xs', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>
+                        {entry.userEmail}
+                      </div>
+                    )}
+                  </td>
+                  <td className={`whitespace-nowrap px-4 py-3 text-sm font-medium ${dark ? 'text-slate-200' : 'text-slate-900'}`}>
+                    ¥{entry.totalAmount.toLocaleString()}
+                  </td>
+                  <td className={tdMuted}>{entry.orderCount}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
--- a/src/components/admin/PaymentMethodChart.tsx
+++ b/src/components/admin/PaymentMethodChart.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+interface PaymentMethod {
+  paymentType: string;
+  amount: number;
+  count: number;
+  percentage: number;
+}
+
+interface PaymentMethodChartProps {
+  data: PaymentMethod[];
+  dark?: boolean;
+}
+
+const TYPE_CONFIG: Record<string, { label: string; light: string; dark: string }> = {
+  alipay: { label: '支付宝', light: 'bg-blue-500', dark: 'bg-blue-400' },
+  wechat: { label: '微信支付', light: 'bg-green-500', dark: 'bg-green-400' },
+  stripe: { label: 'Stripe', light: 'bg-purple-500', dark: 'bg-purple-400' },
+};
+
+export default function PaymentMethodChart({ data, dark }: PaymentMethodChartProps) {
+  if (data.length === 0) {
+    return (
+      <div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
+        <h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>支付方式分布</h3>
+        <p className={['text-center text-sm py-8', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>暂无数据</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
+      <h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>支付方式分布</h3>
+      <div className="space-y-4">
+        {data.map((method) => {
+          const config = TYPE_CONFIG[method.paymentType] || {
+            label: method.paymentType,
+            light: 'bg-gray-500',
+            dark: 'bg-gray-400',
+          };
+          return (
+            <div key={method.paymentType}>
+              <div className="mb-1.5 flex items-center justify-between text-sm">
+                <span className={dark ? 'text-slate-300' : 'text-slate-700'}>{config.label}</span>
+                <span className={dark ? 'text-slate-400' : 'text-slate-500'}>
+                  ¥{method.amount.toLocaleString()} · {method.percentage}%
+                </span>
+              </div>
+              <div className={['h-3 w-full overflow-hidden rounded-full', dark ? 'bg-slate-700' : 'bg-slate-100'].join(' ')}>
+                <div
+                  className={['h-full rounded-full transition-all', dark ? config.dark : config.light].join(' ')}
+                  style={{ width: `${method.percentage}%` }}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
Author	SHA1	Message	Date
erio	9a90a7ebb9	fix: embedded 模式下也强制 min-h-screen，防止 dark 模式底部白底	2026-03-04 21:55:43 +08:00
erio	f96f89b7bb	fix: 移除 body 硬编码背景色，修复 dark 模式底部白底问题	2026-03-04 21:23:48 +08:00
erio	56bf0916e3	perf: 添加 paid_at 索引优化 dashboard 查询性能	2026-03-04 20:08:58 +08:00
eriol touwa	3380b808e2	Merge pull request #3 from dexcoder6/feat/admin-dashboard Feat/admin dashboard	2026-03-04 20:07:49 +08:00
dexcoder6	96436f617a	Merge branch 'touwaeriol:main' into feat/admin-dashboard	2026-03-04 19:06:25 +08:00
eriol touwa	d461880a9e	Merge pull request #2 from dexcoder6/fix/stripe-popup-security fix: Stripe 弹窗安全加固 + 清理未使用依赖	2026-03-04 18:11:14 +08:00
erio	69cf0d00d1	fix: 添加 packageManager 字段修复 CI pnpm 版本检测	2026-03-04 18:10:24 +08:00
miwei	3a9a32e2c2	feat: 管理后台数据看板新增 /admin/dashboard 页面，提供充值订单统计与分析： - 汇总统计卡片（今日/累计充值金额、订单数、成功率、平均充值） - 每日充值趋势折线图（recharts，支持 7/30/90 天切换） - 充值排行榜（Top 10 用户） - 支付方式分布（水平条形图） - 与 /admin 订单管理页面互相导航 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-04 17:06:27 +08:00
miwei	d7d91857c7	fix: Stripe 弹窗安全加固 + 清理未使用依赖安全修复: - client_secret 和 publishableKey 不再通过 URL 传递，改用 postMessage 弹窗发送 STRIPE_POPUP_READY 信号，父页面响应 STRIPE_POPUP_INIT 传递敏感数据校验 event.origin 防止跨域消息伪造 - confirmAlipayPayment 改为显式调用，移除动态方法查找 - handleStripeSubmit 中 returnUrl 清理残留 query params 依赖清理: - 移除未使用的 @stripe/react-stripe-js Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-04 15:27:51 +08:00