feat: 支付手续费功能

- 支持提供商级别和渠道级别手续费率配置（FEE_RATE_PROVIDER_* / FEE_RATE_*） - 用户多付手续费，到账金额不变（充值 ¥100 + 1.6% = 实付 ¥101.60） - 前端显示手续费明细和实付金额 - 退款时按实付金额退款，余额扣减到账金额
docs: 集成说明补充我的订单和订单管理页面链接
2026-03-03 22:00:44 +08:00 · 2026-03-03 09:15:43 +08:00 · 2026-03-03 08:19:20 +08:00 · 2026-03-03 08:17:59 +08:00 · 2026-03-03 08:03:02 +08:00 · 2026-03-03 05:54:46 +08:00
39 changed files with 640 additions and 149 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,65 @@
+# 数据库
+DATABASE_URL="postgresql://sub2apipay:password@localhost:5432/sub2apipay"
+
+# Sub2API
+SUB2API_BASE_URL="https://your-sub2api-domain.com"
+SUB2API_ADMIN_API_KEY="your-admin-api-key"
+
+# ── 支付服务商（逗号分隔，决定加载哪些服务商） ───────────────────────────────
+# 可选值: easypay, stripe
+# 示例（仅易支付）:  PAYMENT_PROVIDERS=easypay
+# 示例（仅 Stripe）: PAYMENT_PROVIDERS=stripe
+# 示例（两者都用）:  PAYMENT_PROVIDERS=easypay,stripe
+PAYMENT_PROVIDERS=easypay
+
+# ── 易支付配置（PAYMENT_PROVIDERS 含 easypay 时必填） ────────────────────────
+EASY_PAY_PID="your-pid"
+EASY_PAY_PKEY="your-pkey"
+EASY_PAY_API_BASE="https://zpayz.cn"
+EASY_PAY_NOTIFY_URL="https://pay.example.com/api/easy-pay/notify"
+EASY_PAY_RETURN_URL="https://pay.example.com/pay/result"
+# 渠道 ID（部分易支付平台需要，可选）
+#EASY_PAY_CID_ALIPAY=""
+#EASY_PAY_CID_WXPAY=""
+
+# ── Stripe 配置（PAYMENT_PROVIDERS 含 stripe 时必填） ────────────────────────
+#STRIPE_SECRET_KEY="sk_live_..."
+#STRIPE_PUBLISHABLE_KEY="pk_live_..."
+#STRIPE_WEBHOOK_SECRET="whsec_..."
+
+# ── 启用的支付渠道（在已配置服务商支持的渠道中选择） ─────────────────────────
+# 易支付支持: alipay, wxpay
+# Stripe  支持: stripe
+ENABLED_PAYMENT_TYPES="alipay,wxpay"
+
+# ── 订单配置 ──────────────────────────────────────────────────────────────────
+ORDER_TIMEOUT_MINUTES="5"
+MIN_RECHARGE_AMOUNT="1"
+MAX_RECHARGE_AMOUNT="10000"
+# 每用户每日累计充值上限，0 = 不限制
+MAX_DAILY_RECHARGE_AMOUNT="0"
+# 各渠道全平台每日总限额，0 = 不限制（未设置则使用各服务商默认值）
+#MAX_DAILY_AMOUNT_ALIPAY="0"
+#MAX_DAILY_AMOUNT_WXPAY="0"
+#MAX_DAILY_AMOUNT_STRIPE="0"
+PRODUCT_NAME="Sub2API 余额充值"
+
+# ── 手续费（百分比，可选） ─────────────────────────────────────────────────────
+# 提供商级别（应用于该提供商下所有渠道）
+#FEE_RATE_PROVIDER_EASYPAY=1.6
+#FEE_RATE_PROVIDER_STRIPE=5.9
+# 渠道级别（覆盖提供商级别）
+#FEE_RATE_ALIPAY=
+#FEE_RATE_WXPAY=
+#FEE_RATE_STRIPE=
+
+# ── 管理员 ────────────────────────────────────────────────────────────────────
+ADMIN_TOKEN="your-admin-token"
+
+# ── 应用 ──────────────────────────────────────────────────────────────────────
+NEXT_PUBLIC_APP_URL="https://pay.example.com"
+# iframe 允许嵌入的域名（逗号分隔）
+IFRAME_ALLOW_ORIGINS="https://example.com"
+# 充值页面底部帮助内容（可选）
+#PAY_HELP_IMAGE_URL="https://example.com/qrcode.png"
+#PAY_HELP_TEXT="如需帮助请联系客服微信：xxxxx"
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -0,0 +1,44 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    name: Create Release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Generate changelog
+        id: changelog
+        run: |
+          # Get previous tag
+          PREV_TAG=$(git tag --sort=-v:refname | sed -n '2p')
+          if [ -z "$PREV_TAG" ]; then
+            COMMITS=$(git log --pretty=format:"- %s (%h)" HEAD)
+          else
+            COMMITS=$(git log --pretty=format:"- %s (%h)" "${PREV_TAG}..HEAD")
+          fi
+          {
+            echo 'body<<EOF'
+            echo "## What's Changed"
+            echo ""
+            echo "$COMMITS"
+            echo ""
+            echo "**Full Changelog**: https://github.com/${{ github.repository }}/compare/${PREV_TAG:-$(git rev-list --max-parents=0 HEAD | head -1)}...${{ github.ref_name }}"
+            echo 'EOF'
+          } >> "$GITHUB_OUTPUT"
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          body: ${{ steps.changelog.outputs.body }}
+          generate_release_notes: false
--- a/0e10fd7fa68c9dda45b221f98145dd7a.jpg
+++ b/0e10fd7fa68c9dda45b221f98145dd7a.jpg
--- a/README.en.md
+++ b/README.en.md
@@ -94,16 +94,39 @@ See [`.env.example`](./.env.example) for the full template.

 > `DATABASE_URL` is automatically injected by Docker Compose when using the bundled database.

-### Payment Methods
+### Payment Providers & Methods

-Control which payment methods are enabled via `ENABLED_PAYMENT_TYPES` (comma-separated):
+**Step 1**: Declare which payment providers to load via `PAYMENT_PROVIDERS` (comma-separated):

 ```env
-ENABLED_PAYMENT_TYPES=alipay,wxpay,stripe
+# EasyPay only
+PAYMENT_PROVIDERS=easypay
+# Stripe only
+PAYMENT_PROVIDERS=stripe
+# Both
+PAYMENT_PROVIDERS=easypay,stripe
+```
+
+**Step 2**: Control which channels are shown to users via `ENABLED_PAYMENT_TYPES`:
+
+```env
+# EasyPay supports: alipay, wxpay  |  Stripe supports: stripe
+ENABLED_PAYMENT_TYPES=alipay,wxpay
 ```

 #### EasyPay (Alipay / WeChat Pay)

+Any payment provider compatible with the **EasyPay protocol** can be used, such as [ZPay](https://z-pay.cn/?uid=23808) (`https://z-pay.cn/?uid=23808`) (this link contains the author's referral code — feel free to remove it).
+
+<details>
+<summary>ZPay Registration QR Code</summary>
+
+![ZPay Preview](./docs/zpay-preview.png)
+
+</details>
+
+> **Disclaimer**: Please evaluate the security, reliability, and compliance of any third-party payment provider on your own. This project does not endorse or guarantee any specific provider.
+
 | Variable | Description |
 |----------|-------------|
 | `EASY_PAY_PID` | EasyPay merchant ID |
@@ -137,10 +160,31 @@ ENABLED_PAYMENT_TYPES=alipay,wxpay,stripe

 ### UI Customization (Optional)

+Display a support contact image and description on the right side of the payment page.
+
 | Variable | Description |
 |----------|-------------|
-| `NEXT_PUBLIC_PAY_HELP_IMAGE_URL` | Help image URL (e.g. customer service QR code) |
-| `NEXT_PUBLIC_PAY_HELP_TEXT` | Help text displayed on payment page |
+| `PAY_HELP_IMAGE_URL` | Help image URL — external URL or local path (see below) |
+| `PAY_HELP_TEXT` | Help text; use `\n` for line breaks, e.g. `Scan to add WeChat\nMon–Fri 9am–6pm` |
+
+**Two ways to provide the image:**
+
+- **External URL** (recommended — no Compose changes needed): any publicly accessible image link (CDN, OSS, image hosting).
+  ```env
+  PAY_HELP_IMAGE_URL=https://cdn.example.com/help-qr.jpg
+  ```
+
+- **Local file**: place the image in `./uploads/` and reference it as `/uploads/<filename>`.
+  The directory must be mounted in `docker-compose.app.yml` (included by default):
+  ```yaml
+  volumes:
+    - ./uploads:/app/public/uploads:ro
+  ```
+  ```env
+  PAY_HELP_IMAGE_URL=/uploads/help-qr.jpg
+  ```
+
+> Clicking the help image opens it full-screen in the center of the screen.

 ### Docker Compose Variables

@@ -220,16 +264,20 @@ docker compose exec app npx prisma migrate deploy

 ## Sub2API Integration

-Configure the recharge URL in the Sub2API admin panel:
+The following page URLs can be configured in the Sub2API admin panel:

-```
-https://pay.example.com/pay?user_id={USER_ID}&token={TOKEN}&theme={THEME}
-```
+| Page | URL | Description |
+|------|-----|-------------|
+| Payment | `https://pay.example.com/pay` | User recharge entry |
+| My Orders | `https://pay.example.com/pay/orders` | User views their own recharge history |
+| Order Management | `https://pay.example.com/admin` | Sub2API admin only |
+
+Sub2API **v0.1.88** and above will automatically append the following parameters — no manual query string needed:

 | Parameter | Description |
 |-----------|-------------|
-| `user_id` | Sub2API user ID (required) |
-| `token` | User login token (optional — required to view order history) |
+| `user_id` | Sub2API user ID |
+| `token` | User login token (required to view order history) |
 | `theme` | `light` (default) or `dark` |
 | `ui_mode` | `standalone` (default) or `embedded` (for iframe) |

--- a/README.md
+++ b/README.md
@@ -94,16 +94,39 @@ docker compose up -d --build

 > `DATABASE_URL` 使用自带数据库时由 Compose 自动注入，无需手动填写。

-### 支付方式
+### 支付服务商与支付方式

-通过 `ENABLED_PAYMENT_TYPES` 控制开启哪些支付方式（逗号分隔）：
+**第一步**：通过 `PAYMENT_PROVIDERS` 声明启用哪些支付服务商（逗号分隔）：

 ```env
-ENABLED_PAYMENT_TYPES=alipay,wxpay,stripe
+# 仅易支付
+PAYMENT_PROVIDERS=easypay
+# 仅 Stripe
+PAYMENT_PROVIDERS=stripe
+# 两者都用
+PAYMENT_PROVIDERS=easypay,stripe
+```
+
+**第二步**：通过 `ENABLED_PAYMENT_TYPES` 控制向用户展示哪些支付渠道：
+
+```env
+# 易支付支持: alipay, wxpay；Stripe 支持: stripe
+ENABLED_PAYMENT_TYPES=alipay,wxpay
 ```

 #### EasyPay（支付宝 / 微信支付）

+支付提供商只需兼容**易支付（EasyPay）协议**即可接入，例如 [ZPay](https://z-pay.cn/?uid=23808)（`https://z-pay.cn/?uid=23808`）等平台（链接含本项目作者的邀请码，介意可去掉）。
+
+<details>
+<summary>ZPay 申请二维码</summary>
+
+![ZPay 预览](./docs/zpay-preview.png)
+
+</details>
+
+> **注意**：支付渠道的安全性、稳定性及合规性请自行鉴别，本项目不对任何第三方支付服务商做担保或背书。
+
 | 变量 | 说明 |
 |------|------|
 | `EASY_PAY_PID` | EasyPay 商户 ID |
@@ -137,10 +160,31 @@ ENABLED_PAYMENT_TYPES=alipay,wxpay,stripe

 ### UI 定制（可选）

+在充值页面右侧可展示客服联系方式、说明图片等帮助内容。
+
 | 变量 | 说明 |
 |------|------|
-| `NEXT_PUBLIC_PAY_HELP_IMAGE_URL` | 帮助图片 URL（如客服二维码） |
-| `NEXT_PUBLIC_PAY_HELP_TEXT` | 帮助说明文字 |
+| `PAY_HELP_IMAGE_URL` | 帮助图片地址（支持外部 URL 或本地路径，见下方说明） |
+| `PAY_HELP_TEXT` | 帮助说明文字，用 `\n` 换行，如 `扫码加微信\n工作日 9-18 点在线` |
+
+**图片地址两种方式：**
+
+- **外部 URL**（推荐，无需改 Compose 配置）：直接填图片的公网地址，如 OSS / CDN / 图床链接。
+  ```env
+  PAY_HELP_IMAGE_URL=https://cdn.example.com/help-qr.jpg
+  ```
+
+- **本地文件**：将图片放到 `./uploads/` 目录，通过 `/uploads/文件名` 引用。
+  需在 `docker-compose.app.yml` 中挂载目录（默认已包含）：
+  ```yaml
+  volumes:
+    - ./uploads:/app/public/uploads:ro
+  ```
+  ```env
+  PAY_HELP_IMAGE_URL=/uploads/help-qr.jpg
+  ```
+
+> 点击帮助图片可在屏幕中央全屏放大查看。

 ### Docker Compose 专用

@@ -220,16 +264,20 @@ docker compose exec app npx prisma migrate deploy

 ## 集成到 Sub2API

-在 Sub2API 管理后台将充值链接配置为：
+在 Sub2API 管理后台可配置以下页面链接：

-```
-https://pay.example.com/pay?user_id={USER_ID}&token={TOKEN}&theme={THEME}
-```
+| 页面 | 链接 | 说明 |
+|------|------|------|
+| 充值页面 | `https://pay.example.com/pay` | 用户充值入口 |
+| 我的订单 | `https://pay.example.com/pay/orders` | 用户查看自己的充值记录 |
+| 订单管理 | `https://pay.example.com/admin` | 仅 Sub2API 管理员可访问 |
+
+Sub2API **v0.1.88** 及以上版本会自动拼接以下参数，无需手动添加：

 | 参数 | 说明 |
 |------|------|
-| `user_id` | Sub2API 用户 ID（必填） |
-| `token` | 用户登录 Token（可选，有 token 才能查看订单历史） |
+| `user_id` | Sub2API 用户 ID |
+| `token` | 用户登录 Token（有 token 才能查看订单历史） |
 | `theme` | `light`（默认）或 `dark` |
 | `ui_mode` | `standalone`（默认）或 `embedded`（iframe 嵌入） |

--- a/docker-compose.app.yml
+++ b/docker-compose.app.yml
@@ -12,4 +12,7 @@ services:
    ports:
      - '${APP_PORT:-3001}:3000'
    env_file: .env
+    volumes:
+      # 宿主机 uploads 目录挂载到 Next.js public/uploads，可通过 /uploads/* 访问
+      - ./uploads:/app/public/uploads:ro
    restart: unless-stopped
--- a/docs/zpay-preview.png
+++ b/docs/zpay-preview.png
--- a/prisma/migrations/20260302000000_add_order_source_tracking/migration.sql
+++ b/prisma/migrations/20260302000000_add_order_source_tracking/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "orders" ADD COLUMN "src_host" TEXT,
+ADD COLUMN "src_url" TEXT;
--- a/prisma/migrations/20260303000000_add_user_notes/migration.sql
+++ b/prisma/migrations/20260303000000_add_user_notes/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "orders" ADD COLUMN "user_notes" TEXT;
--- a/prisma/migrations/20260303100000_add_fee_fields/migration.sql
+++ b/prisma/migrations/20260303100000_add_fee_fields/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "orders" ADD COLUMN "pay_amount" DECIMAL(10,2),
+ADD COLUMN "fee_rate" DECIMAL(5,2);
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -11,7 +11,10 @@ model Order {
  userId        Int         @map("user_id")
  userEmail     String?     @map("user_email")
  userName      String?     @map("user_name")
+  userNotes     String?     @map("user_notes")
  amount        Decimal     @db.Decimal(10, 2)
+  payAmount     Decimal?    @db.Decimal(10, 2) @map("pay_amount")
+  feeRate       Decimal?    @db.Decimal(5, 2)  @map("fee_rate")
  rechargeCode  String      @unique @map("recharge_code")
  status        OrderStatus @default(PENDING)
  paymentType   String      @map("payment_type")
@@ -34,6 +37,8 @@ model Order {
  createdAt     DateTime    @default(now()) @map("created_at")
  updatedAt     DateTime    @updatedAt @map("updated_at")
  clientIp      String?     @map("client_ip")
+  srcHost       String?     @map("src_host")
+  srcUrl        String?     @map("src_url")

  auditLogs     AuditLog[]

--- a/src/tests/lib/payment/registry.test.ts
+++ b/src/tests/lib/payment/registry.test.ts
@@ -12,10 +12,12 @@ import type {

 class MockProvider implements PaymentProvider {
  readonly name: string;
+  readonly providerKey: string;
  readonly supportedTypes: PaymentType[];

  constructor(name: string, types: PaymentType[]) {
    this.name = name;
+    this.providerKey = name;
    this.supportedTypes = types;
  }

--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -5,12 +5,14 @@ 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;
  userId: number;
  userName: string | null;
  userEmail: string | null;
+  userNotes: string | null;
  amount: number;
  status: string;
  paymentType: string;
@@ -19,6 +21,7 @@ interface AdminOrder {
  completedAt: string | null;
  failedReason: string | null;
  expiresAt: string;
+  srcHost: string | null;
 }

 interface AdminOrderDetail extends AdminOrder {
@@ -31,6 +34,8 @@ interface AdminOrderDetail extends AdminOrder {
  failedAt: string | null;
  updatedAt: string;
  clientIp: string | null;
+  srcHost: string | null;
+  srcUrl: string | null;
  paymentSuccess?: boolean;
  rechargeSuccess?: boolean;
  rechargeStatus?: string;
@@ -40,6 +45,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);
@@ -85,8 +94,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>
    );
  }
@@ -151,22 +163,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>
@@ -181,9 +200,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>
@@ -191,11 +213,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>

@@ -207,11 +229,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>
  );
 }

--- a/src/app/api/admin/orders/[id]/cancel/route.ts
+++ b/src/app/api/admin/orders/[id]/cancel/route.ts
@@ -3,7 +3,7 @@ import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
 import { adminCancelOrder, OrderError } from '@/lib/order/service';

 export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  if (!verifyAdminToken(request)) return unauthorizedResponse();
+  if (!await verifyAdminToken(request)) return unauthorizedResponse();

  try {
    const { id } = await params;
--- a/src/app/api/admin/orders/[id]/retry/route.ts
+++ b/src/app/api/admin/orders/[id]/retry/route.ts
@@ -3,7 +3,7 @@ import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
 import { retryRecharge, OrderError } from '@/lib/order/service';

 export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  if (!verifyAdminToken(request)) return unauthorizedResponse();
+  if (!await verifyAdminToken(request)) return unauthorizedResponse();

  try {
    const { id } = await params;
--- a/src/app/api/admin/orders/[id]/route.ts
+++ b/src/app/api/admin/orders/[id]/route.ts
@@ -3,7 +3,7 @@ import { prisma } from '@/lib/db';
 import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';

 export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  if (!verifyAdminToken(request)) return unauthorizedResponse();
+  if (!await verifyAdminToken(request)) return unauthorizedResponse();

  const { id } = await params;

--- a/src/app/api/admin/orders/route.ts
+++ b/src/app/api/admin/orders/route.ts
@@ -4,7 +4,7 @@ import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
 import { Prisma, OrderStatus } from '@prisma/client';

 export async function GET(request: NextRequest) {
-  if (!verifyAdminToken(request)) return unauthorizedResponse();
+  if (!await verifyAdminToken(request)) return unauthorizedResponse();

  const searchParams = request.nextUrl.searchParams;
  const page = Math.max(1, Number(searchParams.get('page') || '1'));
@@ -34,6 +34,7 @@ export async function GET(request: NextRequest) {
        userId: true,
        userName: true,
        userEmail: true,
+        userNotes: true,
        amount: true,
        status: true,
        paymentType: true,
@@ -42,6 +43,7 @@ export async function GET(request: NextRequest) {
        completedAt: true,
        failedReason: true,
        expiresAt: true,
+        srcHost: true,
      },
    }),
    prisma.order.count({ where }),
--- a/src/app/api/admin/refund/route.ts
+++ b/src/app/api/admin/refund/route.ts
@@ -10,7 +10,7 @@ const refundSchema = z.object({
 });

 export async function POST(request: NextRequest) {
-  if (!verifyAdminToken(request)) return unauthorizedResponse();
+  if (!await verifyAdminToken(request)) return unauthorizedResponse();

  try {
    const body = await request.json();
--- a/src/app/api/orders/route.ts
+++ b/src/app/api/orders/route.ts
@@ -7,6 +7,8 @@ const createOrderSchema = z.object({
  user_id: z.number().int().positive(),
  amount: z.number().positive(),
  payment_type: z.enum(['alipay', 'wxpay', 'stripe']),
+  src_host: z.string().max(253).optional(),
+  src_url: z.string().max(2048).optional(),
 });

 export async function POST(request: NextRequest) {
@@ -19,7 +21,7 @@ export async function POST(request: NextRequest) {
      return NextResponse.json({ error: '参数错误', details: parsed.error.flatten().fieldErrors }, { status: 400 });
    }

-    const { user_id, amount, payment_type } = parsed.data;
+    const { user_id, amount, payment_type, src_host, src_url } = parsed.data;

    // Validate amount range
    if (amount < env.MIN_RECHARGE_AMOUNT || amount > env.MAX_RECHARGE_AMOUNT) {
@@ -42,6 +44,8 @@ export async function POST(request: NextRequest) {
      amount,
      paymentType: payment_type,
      clientIp,
+      srcHost: src_host,
+      srcUrl: src_url,
    });

    // 不向客户端暴露 userName / userBalance 等隐私字段
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -27,6 +27,8 @@ export async function GET(request: NextRequest) {
        maxAmount: env.MAX_RECHARGE_AMOUNT,
        maxDailyAmount: env.MAX_DAILY_RECHARGE_AMOUNT,
        methodLimits,
+        helpImageUrl: env.PAY_HELP_IMAGE_URL ?? null,
+        helpText: env.PAY_HELP_TEXT ?? null,
      },
    });
  } catch (error) {
--- a/src/app/pay/orders/page.tsx
+++ b/src/app/pay/orders/page.tsx
@@ -24,6 +24,7 @@ function OrdersContent() {
  const token = (searchParams.get('token') || '').trim();
  const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
  const uiMode = searchParams.get('ui_mode') || 'standalone';
+  const srcHost = searchParams.get('src_host') || '';
  const isDark = theme === 'dark';

  const [isIframeContext, setIsIframeContext] = useState(true);
@@ -178,7 +179,7 @@ function OrdersContent() {
      actions={
        <>
          <button type="button" onClick={() => loadOrders(page, pageSize)} className={btnClass}>刷新</button>
-          <a href={buildScopedUrl('/pay')} className={btnClass}>返回充值</a>
+          {!srcHost && <a href={buildScopedUrl('/pay')} className={btnClass}>返回充值</a>}
        </>
      }
    >
--- a/src/app/pay/page.tsx
+++ b/src/app/pay/page.tsx
@@ -13,6 +13,7 @@ import type { MethodLimitInfo } from '@/components/PaymentForm';
 interface OrderResult {
  orderId: string;
  amount: number;
+  payAmount?: number;
  status: string;
  paymentType: 'alipay' | 'wxpay' | 'stripe';
  payUrl?: string | null;
@@ -27,6 +28,8 @@ interface AppConfig {
  maxAmount: number;
  maxDailyAmount: number;
  methodLimits?: Record<string, MethodLimitInfo>;
+  helpImageUrl?: string | null;
+  helpText?: string | null;
 }

 function PayContent() {
@@ -36,6 +39,8 @@ function PayContent() {
  const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
  const uiMode = searchParams.get('ui_mode') || 'standalone';
  const tab = searchParams.get('tab');
+  const srcHost = searchParams.get('src_host') || undefined;
+  const srcUrl = searchParams.get('src_url') || undefined;
  const isDark = theme === 'dark';

  const [isIframeContext, setIsIframeContext] = useState(true);
@@ -60,12 +65,13 @@ function PayContent() {
    maxDailyAmount: 0,
  });
  const [userNotFound, setUserNotFound] = useState(false);
+  const [helpImageOpen, setHelpImageOpen] = useState(false);

  const effectiveUserId = resolvedUserId || userId;
  const isEmbedded = uiMode === 'embedded' && isIframeContext;
  const hasToken = token.length > 0;
-  const helpImageUrl = (process.env.NEXT_PUBLIC_PAY_HELP_IMAGE_URL || '').trim();
-  const helpText = (process.env.NEXT_PUBLIC_PAY_HELP_TEXT || '').trim();
+  const helpImageUrl = (config.helpImageUrl || '').trim();
+  const helpText = (config.helpText || '').trim();
  const hasHelpContent = Boolean(helpImageUrl || helpText);

  useEffect(() => {
@@ -87,6 +93,7 @@ function PayContent() {
  const loadUserAndOrders = async () => {
    if (!userId || Number.isNaN(userId) || userId <= 0) return;

+    setUserNotFound(false);
    try {
      // 始终获取服务端配置（不含隐私信息）
      const cfgRes = await fetch(`/api/user?user_id=${userId}`);
@@ -99,6 +106,8 @@ function PayContent() {
            maxAmount: cfgData.config.maxAmount ?? 1000,
            maxDailyAmount: cfgData.config.maxDailyAmount ?? 0,
            methodLimits: cfgData.config.methodLimits,
+            helpImageUrl: cfgData.config.helpImageUrl ?? null,
+            helpText: cfgData.config.helpText ?? null,
          });
        }
      } else if (cfgRes.status === 404) {
@@ -224,6 +233,8 @@ function PayContent() {
          user_id: effectiveUserId,
          amount,
          payment_type: paymentType,
+          src_host: srcHost,
+          src_url: srcUrl,
        }),
      });

@@ -245,6 +256,7 @@ function PayContent() {
      setOrderResult({
        orderId: data.orderId,
        amount: data.amount,
+        payAmount: data.payAmount,
        status: data.status,
        paymentType: data.paymentType || paymentType,
        payUrl: data.payUrl,
@@ -294,7 +306,7 @@ function PayContent() {
    <PayPageLayout
      isDark={isDark}
      isEmbedded={isEmbedded}
-      maxWidth={isMobile ? 'sm' : 'full'}
+      maxWidth={isMobile ? 'sm' : 'lg'}
      title="Sub2API 余额充值"
      subtitle="安全支付，自动到账"
      actions={!isMobile ? (
@@ -400,6 +412,7 @@ function PayContent() {
                  userName={userInfo?.username}
                  userBalance={userInfo?.balance}
                  enabledPaymentTypes={config.enabledPaymentTypes}
+                  methodLimits={config.methodLimits}
                  minAmount={config.minAmount}
                  maxAmount={config.maxAmount}
                  onSubmit={handleSubmit}
@@ -427,13 +440,16 @@ function PayContent() {
                      <img
                        src={helpImageUrl}
                        alt='help'
-                        className='mt-3 max-h-40 w-full rounded-lg object-contain bg-white/70 p-2'
+                        onClick={() => setHelpImageOpen(true)}
+                        className='mt-3 max-h-40 w-full cursor-zoom-in rounded-lg object-contain bg-white/70 p-2'
                      />
                    )}
                    {helpText && (
-                      <p className={['mt-3 text-sm leading-6', isDark ? 'text-slate-300' : 'text-slate-600'].join(' ')}>
-                        {helpText}
-                      </p>
+                      <div className={['mt-3 space-y-1 text-sm leading-6', isDark ? 'text-slate-300' : 'text-slate-600'].join(' ')}>
+                        {helpText.split('\\n').map((line, i) => (
+                          <p key={i}>{line}</p>
+                        ))}
+                      </div>
                    )}
                  </div>
                )}
@@ -452,6 +468,7 @@ function PayContent() {
          checkoutUrl={orderResult.checkoutUrl}
          paymentType={orderResult.paymentType}
          amount={orderResult.amount}
+          payAmount={orderResult.payAmount}
          expiresAt={orderResult.expiresAt}
          onStatusChange={handleStatusChange}
          onBack={handleBack}
@@ -462,6 +479,20 @@ function PayContent() {
      {step === 'result' && (
        <OrderStatus status={finalStatus} onBack={handleBack} dark={isDark} />
      )}
+
+      {helpImageOpen && helpImageUrl && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm"
+          onClick={() => setHelpImageOpen(false)}
+        >
+          <img
+            src={helpImageUrl}
+            alt='help'
+            className='max-h-[90vh] max-w-full rounded-xl object-contain shadow-2xl'
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
    </PayPageLayout>
  );
 }
--- a/src/components/PayPageLayout.tsx
+++ b/src/components/PayPageLayout.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 interface PayPageLayoutProps {
  isDark: boolean;
  isEmbedded?: boolean;
-  maxWidth?: 'sm' | 'full';
+  maxWidth?: 'sm' | 'lg' | 'full';
  title: string;
  subtitle: string;
  actions?: React.ReactNode;
@@ -19,30 +19,37 @@ export default function PayPageLayout({
  actions,
  children,
 }: PayPageLayoutProps) {
+  const maxWidthClass = maxWidth === 'sm' ? 'max-w-lg' : maxWidth === 'lg' ? 'max-w-6xl' : '';
+
  return (
    <div
      className={[
-        'relative min-h-screen w-full overflow-hidden p-3 sm:p-4',
+        'relative w-full overflow-hidden',
+        isEmbedded ? 'p-2' : 'min-h-screen p-3 sm:p-4',
        isDark ? 'bg-slate-950 text-slate-100' : 'bg-slate-100 text-slate-900',
      ].join(' ')}
    >
-      <div
-        className={[
-          'pointer-events-none absolute -left-20 -top-20 h-56 w-56 rounded-full blur-3xl',
-          isDark ? 'bg-indigo-500/25' : 'bg-sky-300/35',
-        ].join(' ')}
-      />
-      <div
-        className={[
-          'pointer-events-none absolute -right-24 bottom-0 h-64 w-64 rounded-full blur-3xl',
-          isDark ? 'bg-cyan-400/20' : 'bg-indigo-200/45',
-        ].join(' ')}
-      />
+      {!isEmbedded && (
+        <>
+          <div
+            className={[
+              'pointer-events-none absolute -left-20 -top-20 h-56 w-56 rounded-full blur-3xl',
+              isDark ? 'bg-indigo-500/25' : 'bg-sky-300/35',
+            ].join(' ')}
+          />
+          <div
+            className={[
+              'pointer-events-none absolute -right-24 bottom-0 h-64 w-64 rounded-full blur-3xl',
+              isDark ? 'bg-cyan-400/20' : 'bg-indigo-200/45',
+            ].join(' ')}
+          />
+        </>
+      )}

      <div
        className={[
          'relative mx-auto w-full rounded-3xl border p-4 sm:p-6',
-          maxWidth === 'sm' ? 'max-w-lg' : 'max-w-6xl',
+          maxWidthClass,
          isDark
            ? 'border-slate-700/70 bg-slate-900/85 shadow-2xl shadow-black/35'
            : 'border-slate-200/90 bg-white/95 shadow-2xl shadow-slate-300/45',
--- a/src/components/PaymentForm.tsx
+++ b/src/components/PaymentForm.tsx
@@ -8,6 +8,8 @@ export interface MethodLimitInfo {
  remaining: number | null;
  /** 单笔限额，0 = 使用全局 maxAmount */
  singleMax?: number;
+  /** 手续费率百分比，0 = 无手续费 */
+  feeRate?: number;
 }

 interface PaymentFormProps {
@@ -75,6 +77,13 @@ export default function PaymentForm({
  const isMethodAvailable = !methodLimits || (methodLimits[paymentType]?.available !== false);
  const methodSingleMax = methodLimits?.[paymentType]?.singleMax;
  const effectiveMax = (methodSingleMax !== undefined && methodSingleMax > 0) ? methodSingleMax : maxAmount;
+  const feeRate = methodLimits?.[paymentType]?.feeRate ?? 0;
+  const feeAmount = feeRate > 0 && selectedAmount > 0
+    ? Math.ceil(selectedAmount * feeRate / 100 * 100) / 100
+    : 0;
+  const payAmount = feeRate > 0 && selectedAmount > 0
+    ? Math.round((selectedAmount + feeAmount) * 100) / 100
+    : selectedAmount;
  const isValid = selectedAmount >= minAmount && selectedAmount <= effectiveMax && hasValidCentPrecision(selectedAmount) && isMethodAvailable;

  const handleSubmit = async (e: React.FormEvent) => {
@@ -277,6 +286,32 @@ export default function PaymentForm({
        })()}
      </div>

+      {/* Fee Detail */}
+      {feeRate > 0 && selectedAmount > 0 && (
+        <div
+          className={[
+            'rounded-xl border px-4 py-3 text-sm',
+            dark ? 'border-slate-700 bg-slate-800/60 text-slate-300' : 'border-slate-200 bg-slate-50 text-slate-600',
+          ].join(' ')}
+        >
+          <div className="flex items-center justify-between">
+            <span>充值金额</span>
+            <span>¥{selectedAmount.toFixed(2)}</span>
+          </div>
+          <div className="flex items-center justify-between mt-1">
+            <span>手续费（{feeRate}%）</span>
+            <span>¥{feeAmount.toFixed(2)}</span>
+          </div>
+          <div className={[
+            'flex items-center justify-between mt-1.5 pt-1.5 border-t font-medium',
+            dark ? 'border-slate-700 text-slate-100' : 'border-slate-200 text-slate-900',
+          ].join(' ')}>
+            <span>实付金额</span>
+            <span>¥{payAmount.toFixed(2)}</span>
+          </div>
+        </div>
+      )}
+
      {/* Submit */}
      <button
        type="submit"
@@ -291,7 +326,7 @@ export default function PaymentForm({
              : 'cursor-not-allowed bg-gray-300'
        }`}
      >
-        {loading ? '处理中...' : `立即充值 ¥${selectedAmount || 0}`}
+        {loading ? '处理中...' : `立即充值 ¥${(feeRate > 0 && selectedAmount > 0 ? payAmount : selectedAmount || 0).toFixed(2)}`}
      </button>
    </form>
  );
--- a/src/components/PaymentQRCode.tsx
+++ b/src/components/PaymentQRCode.tsx
@@ -11,6 +11,7 @@ interface PaymentQRCodeProps {
  checkoutUrl?: string | null;
  paymentType?: 'alipay' | 'wxpay' | 'stripe';
  amount: number;
+  payAmount?: number;
  expiresAt: string;
  onStatusChange: (status: string) => void;
  onBack: () => void;
@@ -42,11 +43,14 @@ export default function PaymentQRCode({
  checkoutUrl,
  paymentType,
  amount,
+  payAmount: payAmountProp,
  expiresAt,
  onStatusChange,
  onBack,
  dark = false,
 }: PaymentQRCodeProps) {
+  const displayAmount = payAmountProp ?? amount;
+  const hasFeeDiff = payAmountProp !== undefined && payAmountProp !== amount;
  const [timeLeft, setTimeLeft] = useState('');
  const [expired, setExpired] = useState(false);
  const [qrDataUrl, setQrDataUrl] = useState('');
@@ -196,7 +200,12 @@ export default function PaymentQRCode({
  return (
    <div className="flex flex-col items-center space-y-4">
      <div className="text-center">
-        <div className="text-4xl font-bold text-blue-600">{'\u00A5'}{amount.toFixed(2)}</div>
+        <div className="text-4xl font-bold text-blue-600">{'\u00A5'}{displayAmount.toFixed(2)}</div>
+        {hasFeeDiff && (
+          <div className={['mt-1 text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>
+            到账 ¥{amount.toFixed(2)}
+          </div>
+        )}
        <div className={`mt-1 text-sm ${expired ? 'text-red-500' : dark ? 'text-slate-400' : 'text-gray-500'}`}>
          {expired ? TEXT_EXPIRED : `${TEXT_REMAINING}: ${timeLeft}`}
        </div>
--- a/src/components/admin/OrderDetail.tsx
+++ b/src/components/admin/OrderDetail.tsx
@@ -31,15 +31,18 @@ interface OrderDetailProps {
    createdAt: string;
    updatedAt: string;
    clientIp: string | null;
+    srcHost: string | null;
+    srcUrl: string | null;
    paymentSuccess?: boolean;
    rechargeSuccess?: boolean;
    rechargeStatus?: string;
    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 },
@@ -54,6 +57,8 @@ export default function OrderDetail({ order, onClose }: OrderDetailProps) {
    { label: '充值码', value: order.rechargeCode },
    { label: '支付单号', value: order.paymentTradeNo || '-' },
    { label: '客户端IP', value: order.clientIp || '-' },
+    { label: '来源域名', value: order.srcHost || '-' },
+    { label: '来源页面', value: order.srcUrl || '-' },
    { label: '创建时间', value: new Date(order.createdAt).toLocaleString('zh-CN') },
    { label: '过期时间', value: new Date(order.expiresAt).toLocaleString('zh-CN') },
    { label: '支付时间', value: order.paidAt ? new Date(order.paidAt).toLocaleString('zh-CN') : '-' },
@@ -74,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 className="text-xs text-gray-500">{label}</div>
-              <div className="mt-1 break-all text-sm font-medium">{value}</div>
+            <div key={label} className={`rounded-lg p-3 ${dark ? 'bg-slate-700/60' : 'bg-gray-50'}`}>
+              <div className={`text-xs ${dark ? 'text-slate-400' : 'text-gray-500'}`}>{label}</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.operator && <div className="mt-1 text-xs text-gray-400">操作者: {log.operator}</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 ${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>
--- a/src/components/admin/OrderTable.tsx
+++ b/src/components/admin/OrderTable.tsx
@@ -1,12 +1,11 @@
 'use client';

-import { useState } from 'react';
-
 interface Order {
  id: string;
  userId: number;
  userName: string | null;
  userEmail: string | null;
+  userNotes: string | null;
  amount: number;
  status: string;
  paymentType: string;
@@ -15,6 +14,7 @@ interface Order {
  completedAt: string | null;
  failedReason: string | null;
  expiresAt: string;
+  srcHost: string | null;
  rechargeRetryable?: boolean;
 }

@@ -23,63 +23,75 @@ 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 }> = {
-  PENDING: { label: '待支付', className: 'bg-yellow-100 text-yellow-800' },
-  PAID: { label: '已支付', className: 'bg-blue-100 text-blue-800' },
-  RECHARGING: { label: '充值中', className: 'bg-blue-100 text-blue-800' },
-  COMPLETED: { label: '已完成', className: 'bg-green-100 text-green-800' },
-  EXPIRED: { label: '已超时', className: 'bg-gray-100 text-gray-800' },
-  CANCELLED: { label: '已取消', className: 'bg-gray-100 text-gray-800' },
-  FAILED: { label: '充值失败', className: 'bg-red-100 text-red-800' },
-  REFUNDING: { label: '退款中', className: 'bg-orange-100 text-orange-800' },
-  REFUNDED: { label: '已退款', className: 'bg-purple-100 text-purple-800' },
-  REFUND_FAILED: { label: '退款失败', className: 'bg-red-100 text-red-800' },
+const STATUS_LABELS: Record<string, { label: string; light: string; dark: string }> = {
+  PENDING: { label: '待支付', light: 'bg-yellow-100 text-yellow-800', dark: 'bg-yellow-500/20 text-yellow-300' },
+  PAID: { label: '已支付', light: 'bg-blue-100 text-blue-800', dark: 'bg-blue-500/20 text-blue-300' },
+  RECHARGING: { label: '充值中', light: 'bg-blue-100 text-blue-800', dark: 'bg-blue-500/20 text-blue-300' },
+  COMPLETED: { label: '已完成', light: 'bg-green-100 text-green-800', dark: 'bg-green-500/20 text-green-300' },
+  EXPIRED: { label: '已超时', light: 'bg-gray-100 text-gray-800', dark: 'bg-slate-600/30 text-slate-400' },
+  CANCELLED: { label: '已取消', light: 'bg-gray-100 text-gray-800', dark: 'bg-slate-600/30 text-slate-400' },
+  FAILED: { label: '充值失败', light: 'bg-red-100 text-red-800', dark: 'bg-red-500/20 text-red-300' },
+  REFUNDING: { label: '退款中', light: 'bg-orange-100 text-orange-800', dark: 'bg-orange-500/20 text-orange-300' },
+  REFUNDED: { label: '已退款', light: 'bg-purple-100 text-purple-800', dark: 'bg-purple-500/20 text-purple-300' },
+  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">
-        <thead className="bg-gray-50">
+      <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="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">订单号</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">用户</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">金额</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">状态</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">支付方式</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">创建时间</th>
-            <th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">操作</th>
+            <th className={thCls}>订单号</th>
+            <th className={thCls}>用户名</th>
+            <th className={thCls}>邮箱</th>
+            <th className={thCls}>备注</th>
+            <th className={thCls}>金额</th>
+            <th className={thCls}>状态</th>
+            <th className={thCls}>支付方式</th>
+            <th className={thCls}>来源</th>
+            <th className={thCls}>创建时间</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="text-xs text-gray-400">{order.userEmail || `ID: ${order.userId}`}</div>
+                <td className={`whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-200' : ''}`}>
+                  {order.userName || `#${order.userId}`}
                </td>
-                <td className="whitespace-nowrap px-4 py-3 text-sm font-medium">¥{order.amount.toFixed(2)}</td>
+                <td className={tdMuted}>{order.userEmail || '-'}</td>
+                <td className={tdMuted}>{order.userNotes || '-'}</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={tdMuted}>
                  {new Date(order.createdAt).toLocaleString('zh-CN')}
                </td>
                <td className="whitespace-nowrap px-4 py-3 text-sm">
@@ -87,7 +99,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>
@@ -95,7 +107,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>
@@ -107,7 +119,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>
  );
 }
--- a/src/lib/admin-auth.ts
+++ b/src/lib/admin-auth.ts
@@ -2,10 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { getEnv } from '@/lib/config';
 import crypto from 'crypto';

-export function verifyAdminToken(request: NextRequest): boolean {
-  const token = request.nextUrl.searchParams.get('token');
-  if (!token) return false;
-
+function isLocalAdminToken(token: string): boolean {
  const env = getEnv();
  const expected = Buffer.from(env.ADMIN_TOKEN);
  const received = Buffer.from(token);
@@ -14,6 +11,35 @@ export function verifyAdminToken(request: NextRequest): boolean {
  return crypto.timingSafeEqual(expected, received);
 }

+async function isSub2ApiAdmin(token: string): Promise<boolean> {
+  try {
+    const env = getEnv();
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5000);
+    const response = await fetch(`${env.SUB2API_BASE_URL}/api/v1/auth/me`, {
+      headers: { Authorization: `Bearer ${token}` },
+      signal: controller.signal,
+    });
+    clearTimeout(timeout);
+    if (!response.ok) return false;
+    const data = await response.json();
+    return data.data?.role === 'admin';
+  } catch {
+    return false;
+  }
+}
+
+export async function verifyAdminToken(request: NextRequest): Promise<boolean> {
+  const token = request.nextUrl.searchParams.get('token');
+  if (!token) return false;
+
+  // 1. 本地 admin token
+  if (isLocalAdminToken(token)) return true;
+
+  // 2. Sub2API 管理员 token
+  return isSub2ApiAdmin(token);
+}
+
 export function unauthorizedResponse() {
  return NextResponse.json({ error: '未授权' }, { status: 401 });
 }
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -12,7 +12,13 @@ const envSchema = z.object({
  SUB2API_BASE_URL: z.string().url(),
  SUB2API_ADMIN_API_KEY: z.string().min(1),

-  // ── Easy-Pay (optional when only using Stripe) ──
+  // ── 支付服务商（显式声明启用哪些服务商，逗号分隔：easypay, stripe） ──
+  PAYMENT_PROVIDERS: z
+    .string()
+    .default('')
+    .transform((v) => v.split(',').map((s) => s.trim().toLowerCase()).filter(Boolean)),
+
+  // ── Easy-Pay（PAYMENT_PROVIDERS 含 easypay 时必填） ──
  EASY_PAY_PID: optionalTrimmedString,
  EASY_PAY_PKEY: optionalTrimmedString,
  EASY_PAY_API_BASE: optionalTrimmedString,
@@ -22,10 +28,13 @@ const envSchema = z.object({
  EASY_PAY_CID_ALIPAY: optionalTrimmedString,
  EASY_PAY_CID_WXPAY: optionalTrimmedString,

+  // ── Stripe（PAYMENT_PROVIDERS 含 stripe 时必填） ──
  STRIPE_SECRET_KEY: optionalTrimmedString,
  STRIPE_PUBLISHABLE_KEY: optionalTrimmedString,
  STRIPE_WEBHOOK_SECRET: optionalTrimmedString,

+  // ── 启用的支付渠道（在已配置服务商支持的渠道中选择） ──
+  // 易支付支持: alipay, wxpay；Stripe 支持: stripe
  ENABLED_PAYMENT_TYPES: z
    .string()
    .default('alipay,wxpay')
@@ -47,8 +56,8 @@ const envSchema = z.object({
  ADMIN_TOKEN: z.string().min(1),

  NEXT_PUBLIC_APP_URL: z.string().url(),
-  NEXT_PUBLIC_PAY_HELP_IMAGE_URL: optionalTrimmedString,
-  NEXT_PUBLIC_PAY_HELP_TEXT: optionalTrimmedString,
+  PAY_HELP_IMAGE_URL: optionalTrimmedString,
+  PAY_HELP_TEXT: optionalTrimmedString,
 });

 export type Env = z.infer<typeof envSchema>;
--- a/src/lib/easy-pay/provider.ts
+++ b/src/lib/easy-pay/provider.ts
@@ -14,6 +14,7 @@ import { getEnv } from '@/lib/config';

 export class EasyPayProvider implements PaymentProvider {
  readonly name = 'easy-pay';
+  readonly providerKey = 'easypay';
  readonly supportedTypes: PaymentType[] = ['alipay', 'wxpay'];
  readonly defaultLimits = {
    alipay: { singleMax: 1000, dailyMax: 10000 },
--- a/src/lib/order/fee.ts
+++ b/src/lib/order/fee.ts
@@ -0,0 +1,38 @@
+import { initPaymentProviders, paymentRegistry } from '@/lib/payment';
+
+/**
+ * 获取指定支付渠道的手续费率（百分比）。
+ * 优先级：FEE_RATE_{TYPE} > FEE_RATE_PROVIDER_{KEY} > 0
+ */
+export function getMethodFeeRate(paymentType: string): number {
+  // 渠道级别：FEE_RATE_ALIPAY / FEE_RATE_WXPAY / FEE_RATE_STRIPE
+  const methodRaw = process.env[`FEE_RATE_${paymentType.toUpperCase()}`];
+  if (methodRaw !== undefined && methodRaw !== '') {
+    const num = Number(methodRaw);
+    if (Number.isFinite(num) && num >= 0) return num;
+  }
+
+  // 提供商级别：FEE_RATE_PROVIDER_EASYPAY / FEE_RATE_PROVIDER_STRIPE
+  initPaymentProviders();
+  const providerKey = paymentRegistry.getProviderKey(paymentType);
+  if (providerKey) {
+    const providerRaw = process.env[`FEE_RATE_PROVIDER_${providerKey.toUpperCase()}`];
+    if (providerRaw !== undefined && providerRaw !== '') {
+      const num = Number(providerRaw);
+      if (Number.isFinite(num) && num >= 0) return num;
+    }
+  }
+
+  return 0;
+}
+
+/**
+ * 根据到账金额和手续费率计算实付金额。
+ * feeAmount = ceil(rechargeAmount * feeRate / 100 * 100) / 100  （进一制到分）
+ * payAmount = rechargeAmount + feeAmount
+ */
+export function calculatePayAmount(rechargeAmount: number, feeRate: number): number {
+  if (feeRate <= 0) return rechargeAmount;
+  const feeAmount = Math.ceil(rechargeAmount * feeRate / 100 * 100) / 100;
+  return Math.round((rechargeAmount + feeAmount) * 100) / 100;
+}
--- a/src/lib/order/limits.ts
+++ b/src/lib/order/limits.ts
@@ -1,6 +1,7 @@
 import { prisma } from '@/lib/db';
 import { getEnv } from '@/lib/config';
 import { initPaymentProviders, paymentRegistry } from '@/lib/payment';
+import { getMethodFeeRate } from './fee';

 /**
 * 获取指定支付渠道的每日全平台限额（0 = 不限制）。
@@ -55,6 +56,8 @@ export interface MethodLimitStatus {
  available: boolean;
  /** 单笔限额，0 = 使用全局配置 MAX_RECHARGE_AMOUNT */
  singleMax: number;
+  /** 手续费率百分比，0 = 无手续费 */
+  feeRate: number;
 }

 /**
@@ -85,6 +88,7 @@ export async function queryMethodLimits(
  for (const type of paymentTypes) {
    const dailyLimit = getMethodDailyLimit(type);
    const singleMax = getMethodSingleLimit(type);
+    const feeRate = getMethodFeeRate(type);
    const used = usageMap[type] ?? 0;
    const remaining = dailyLimit > 0 ? Math.max(0, dailyLimit - used) : null;
    result[type] = {
@@ -93,6 +97,7 @@ export async function queryMethodLimits(
      remaining,
      available: dailyLimit === 0 || used < dailyLimit,
      singleMax,
+      feeRate,
    };
  }
  return result;
--- a/src/lib/order/service.ts
+++ b/src/lib/order/service.ts
@@ -2,6 +2,7 @@ import { prisma } from '@/lib/db';
 import { getEnv } from '@/lib/config';
 import { generateRechargeCode } from './code-gen';
 import { getMethodDailyLimit } from './limits';
+import { getMethodFeeRate, calculatePayAmount } from './fee';
 import { initPaymentProviders, paymentRegistry } from '@/lib/payment';
 import type { PaymentType, PaymentNotification } from '@/lib/payment';
 import { getUser, createAndRedeem, subtractBalance } from '@/lib/sub2api/client';
@@ -15,11 +16,15 @@ export interface CreateOrderInput {
  amount: number;
  paymentType: PaymentType;
  clientIp: string;
+  srcHost?: string;
+  srcUrl?: string;
 }

 export interface CreateOrderResult {
  orderId: string;
  amount: number;
+  payAmount: number;
+  feeRate: number;
  status: string;
  paymentType: PaymentType;
  userName: string;
@@ -94,18 +99,26 @@ export async function createOrder(input: CreateOrderInput): Promise<CreateOrderR
    }
  }

+  const feeRate = getMethodFeeRate(input.paymentType);
+  const payAmount = calculatePayAmount(input.amount, feeRate);
+
  const expiresAt = new Date(Date.now() + env.ORDER_TIMEOUT_MINUTES * 60 * 1000);
  const order = await prisma.order.create({
    data: {
      userId: input.userId,
      userEmail: user.email,
      userName: user.username,
+      userNotes: user.notes || null,
      amount: new Prisma.Decimal(input.amount.toFixed(2)),
+      payAmount: new Prisma.Decimal(payAmount.toFixed(2)),
+      feeRate: feeRate > 0 ? new Prisma.Decimal(feeRate.toFixed(2)) : null,
      rechargeCode: '',
      status: 'PENDING',
      paymentType: input.paymentType,
      expiresAt,
      clientIp: input.clientIp,
+      srcHost: input.srcHost || null,
+      srcUrl: input.srcUrl || null,
    },
  });

@@ -120,9 +133,9 @@ export async function createOrder(input: CreateOrderInput): Promise<CreateOrderR
    const provider = paymentRegistry.getProvider(input.paymentType);
    const paymentResult = await provider.createPayment({
      orderId: order.id,
-      amount: input.amount,
+      amount: payAmount,
      paymentType: input.paymentType,
-      subject: `${env.PRODUCT_NAME} ${input.amount.toFixed(2)} CNY`,
+      subject: `${env.PRODUCT_NAME} ${payAmount.toFixed(2)} CNY`,
      notifyUrl: env.EASY_PAY_NOTIFY_URL || '',
      returnUrl: env.EASY_PAY_RETURN_URL || '',
      clientIp: input.clientIp,
@@ -149,6 +162,8 @@ export async function createOrder(input: CreateOrderInput): Promise<CreateOrderR
    return {
      orderId: order.id,
      amount: input.amount,
+      payAmount,
+      feeRate,
      status: 'PENDING',
      paymentType: input.paymentType,
      userName: user.username,
@@ -308,10 +323,11 @@ export async function confirmPayment(input: {
    console.error(`${input.providerName} notify: non-positive amount:`, input.paidAmount);
    return false;
  }
-  if (!paidAmount.equals(order.amount)) {
+  const expectedAmount = order.payAmount ?? order.amount;
+  if (!paidAmount.equals(expectedAmount)) {
    console.warn(
      `${input.providerName} notify: amount changed, use paid amount`,
-      order.amount.toString(),
+      expectedAmount.toString(),
      paidAmount.toString(),
    );
  }
@@ -546,15 +562,16 @@ export async function processRefund(input: RefundInput): Promise<RefundResult> {
    throw new OrderError('INVALID_STATUS', 'Only completed orders can be refunded', 400);
  }

-  const amount = Number(order.amount);
+  const rechargeAmount = Number(order.amount);
+  const refundAmount = Number(order.payAmount ?? order.amount);

  if (!input.force) {
    try {
      const user = await getUser(order.userId);
-      if (user.balance < amount) {
+      if (user.balance < rechargeAmount) {
        return {
          success: false,
-          warning: `User balance ${user.balance} is lower than refund ${amount}`,
+          warning: `User balance ${user.balance} is lower than refund ${rechargeAmount}`,
          requireForce: true,
        };
      }
@@ -582,18 +599,18 @@ export async function processRefund(input: RefundInput): Promise<RefundResult> {
      await provider.refund({
        tradeNo: order.paymentTradeNo,
        orderId: order.id,
-        amount,
+        amount: refundAmount,
        reason: input.reason,
      });
    }

-    await subtractBalance(order.userId, amount, `sub2apipay refund order:${order.id}`, `sub2apipay:refund:${order.id}`);
+    await subtractBalance(order.userId, rechargeAmount, `sub2apipay refund order:${order.id}`, `sub2apipay:refund:${order.id}`);

    await prisma.order.update({
      where: { id: input.orderId },
      data: {
        status: 'REFUNDED',
-        refundAmount: new Prisma.Decimal(amount.toFixed(2)),
+        refundAmount: new Prisma.Decimal(refundAmount.toFixed(2)),
        refundReason: input.reason || null,
        refundAt: new Date(),
        forceRefund: input.force || false,
@@ -604,7 +621,7 @@ export async function processRefund(input: RefundInput): Promise<RefundResult> {
      data: {
        orderId: input.orderId,
        action: 'REFUND_SUCCESS',
-        detail: JSON.stringify({ amount, reason: input.reason, force: input.force }),
+        detail: JSON.stringify({ rechargeAmount, refundAmount, reason: input.reason, force: input.force }),
        operator: 'admin',
      },
    });
--- a/src/lib/payment/index.ts
+++ b/src/lib/payment/index.ts
@@ -1,4 +1,5 @@
 import { paymentRegistry } from './registry';
+import type { PaymentType } from './types';
 import { EasyPayProvider } from '@/lib/easy-pay/provider';
 import { StripeProvider } from '@/lib/stripe/provider';
 import { getEnv } from '@/lib/config';
@@ -19,12 +20,32 @@ let initialized = false;

 export function initPaymentProviders(): void {
  if (initialized) return;
-  paymentRegistry.register(new EasyPayProvider());

  const env = getEnv();
-  if (env.STRIPE_SECRET_KEY) {
+  const providers = env.PAYMENT_PROVIDERS;
+
+  if (providers.includes('easypay')) {
+    if (!env.EASY_PAY_PID || !env.EASY_PAY_PKEY) {
+      throw new Error('PAYMENT_PROVIDERS 含 easypay，但缺少 EASY_PAY_PID 或 EASY_PAY_PKEY');
+    }
+    paymentRegistry.register(new EasyPayProvider());
+  }
+
+  if (providers.includes('stripe')) {
+    if (!env.STRIPE_SECRET_KEY) {
+      throw new Error('PAYMENT_PROVIDERS 含 stripe，但缺少 STRIPE_SECRET_KEY');
+    }
    paymentRegistry.register(new StripeProvider());
  }

+  // 校验 ENABLED_PAYMENT_TYPES 的每个渠道都有对应 provider 已注册
+  const unsupported = env.ENABLED_PAYMENT_TYPES.filter((t) => !paymentRegistry.hasProvider(t as PaymentType));
+  if (unsupported.length > 0) {
+    throw new Error(
+      `ENABLED_PAYMENT_TYPES 含 [${unsupported.join(', ')}]，但没有对应的 PAYMENT_PROVIDERS 注册。` +
+      `请检查 PAYMENT_PROVIDERS 配置`,
+    );
+  }
+
  initialized = true;
 }
--- a/src/lib/payment/registry.ts
+++ b/src/lib/payment/registry.ts
@@ -30,6 +30,12 @@ export class PaymentProviderRegistry {
    const provider = this.providers.get(type as PaymentType);
    return provider?.defaultLimits?.[type];
  }
+
+  /** 获取指定渠道对应的提供商 key（如 'easypay'、'stripe'） */
+  getProviderKey(type: string): string | undefined {
+    const provider = this.providers.get(type as PaymentType);
+    return provider?.providerKey;
+  }
 }

 export const paymentRegistry = new PaymentProviderRegistry();
--- a/src/lib/payment/types.ts
+++ b/src/lib/payment/types.ts
@@ -62,6 +62,7 @@ export interface MethodDefaultLimits {
 /** Common interface that all payment providers must implement */
 export interface PaymentProvider {
  readonly name: string;
+  readonly providerKey: string;
  readonly supportedTypes: PaymentType[];
  /** 各渠道默认限额，key 为 PaymentType（如 'alipay'），可被环境变量覆盖 */
  readonly defaultLimits?: Record<string, MethodDefaultLimits>;
--- a/src/lib/stripe/provider.ts
+++ b/src/lib/stripe/provider.ts
@@ -14,6 +14,7 @@ import type {

 export class StripeProvider implements PaymentProvider {
  readonly name = 'stripe';
+  readonly providerKey = 'stripe';
  readonly supportedTypes: PaymentType[] = ['stripe'];
  readonly defaultLimits = {
    stripe: { singleMax: 0, dailyMax: 0 }, // 0 = unlimited
--- a/src/lib/sub2api/types.ts
+++ b/src/lib/sub2api/types.ts
@@ -4,6 +4,7 @@ export interface Sub2ApiUser {
  email: string;
  status: string; // "active", "banned", etc.
  balance: number;
+  notes?: string;
 }

 export interface Sub2ApiRedeemCode {
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -4,16 +4,27 @@ import type { NextRequest } from 'next/server';
 export function middleware(request: NextRequest) {
  const response = NextResponse.next();

-  // IFRAME_ALLOW_ORIGINS: 允许嵌入 iframe 的外部域名（逗号分隔）
-  const allowOrigins = process.env.IFRAME_ALLOW_ORIGINS || '';
+  // 自动从 SUB2API_BASE_URL 提取 origin，允许 Sub2API 主站 iframe 嵌入
+  const sub2apiUrl = process.env.SUB2API_BASE_URL || '';
+  const extraOrigins = process.env.IFRAME_ALLOW_ORIGINS || '';

-  const origins = allowOrigins
-    .split(',')
-    .map((s) => s.trim())
-    .filter(Boolean);
+  const origins = new Set<string>();

-  if (origins.length > 0) {
-    response.headers.set('Content-Security-Policy', `frame-ancestors 'self' ${origins.join(' ')}`);
+  if (sub2apiUrl) {
+    try {
+      origins.add(new URL(sub2apiUrl).origin);
+    } catch {
+      // ignore invalid URL
+    }
+  }
+
+  for (const s of extraOrigins.split(',')) {
+    const trimmed = s.trim();
+    if (trimmed) origins.add(trimmed);
+  }
+
+  if (origins.size > 0) {
+    response.headers.set('Content-Security-Policy', `frame-ancestors 'self' ${[...origins].join(' ')}`);
  }

  return response;
Author	SHA1	Message	Date
erio	5be0616e78	feat: 支付手续费功能 - 支持提供商级别和渠道级别手续费率配置（FEE_RATE_PROVIDER_* / FEE_RATE_*） - 用户多付手续费，到账金额不变（充值 ¥100 + 1.6% = 实付 ¥101.60） - 前端显示手续费明细和实付金额 - 退款时按实付金额退款，余额扣减到账金额	2026-03-03 22:00:44 +08:00
erio	1a44e94bb5	docs: 集成说明补充我的订单和订单管理页面链接 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 09:15:43 +08:00
erio	c326c6edf1	docs: ZPay 超链接 + 明文 URL 方便复制 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 08:19:20 +08:00
erio	5992c06d67	docs: 同步英文 README，ZPay 链接明文显示，添加 release workflow Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 08:17:59 +08:00
erio	90ad0e0895	docs: README 补充易支付协议说明、ZPay 推荐及免责声明 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 08:03:02 +08:00
erio	52aa484202	feat: 列表页占满宽度，充值页保持居中卡片，嵌入模式优化 - maxWidth 新增 'lg' 选项（max-w-6xl），'full' 改为无限制 - 充值页 PC 端使用 'lg'，管理后台/我的订单使用 'full' 占满宽度 - 嵌入模式：减小外边距、隐藏装饰光斑、取消 min-h-screen Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 05:54:46 +08:00
erio	42da18484c	feat: 管理后台订单列表展示用户备注，用户信息摊平显示 - 新增 userNotes 字段，创建订单时从 Sub2API 读取用户 notes 保存 - 管理后台订单列表将用户名、邮箱、备注拆分为独立列，节约行高 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 04:37:39 +08:00
erio	f4709b784f	fix: 有 src_host 时隐藏订单页「返回充值」按钮从 iframe 嵌入（带 src_host）时不显示返回充值按钮，避免用户跳出。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 03:55:26 +08:00
erio	880f0211f3	feat: 管理后台统一 PayPageLayout 布局，支持 dark mode 管理后台使用与充值页面相同的 PayPageLayout 组件，OrderTable 和 OrderDetail 组件新增 dark prop，所有样式支持暗色模式切换。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 03:31:20 +08:00
erio	930ce60fcc	fix: 审查修复 — 来源字段长度限制、鉴权超时、支付配置启动校验 - src_host max 253, src_url max 2048 - Sub2API 鉴权请求加 5s AbortController 超时 - initPaymentProviders 启动时校验 ENABLED_PAYMENT_TYPES 与已注册 provider 一致性 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 01:56:22 +08:00
erio	8cf78dc295	fix: frame-ancestors 自动从 SUB2API_BASE_URL 推导，无需手动配置不再依赖 IFRAME_ALLOW_ORIGINS 手动配置 Sub2API 域名，自动从 SUB2API_BASE_URL 提取 origin 加入 CSP frame-ancestors。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 01:36:22 +08:00
erio	21cc90a71f	feat: 管理后台支持 Sub2API 管理员 token 认证保留原有 ADMIN_TOKEN 认证，同时支持传入 Sub2API 用户 token，通过 /api/v1/auth/me 验证 role=admin 身份。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 00:41:27 +08:00
erio	c9462f4f14	feat: 管理后台订单列表显示来源域名（srcHost） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-03 00:19:01 +08:00
erio	d952942627	feat: 订单来源追踪，保存 src_host / src_url 到订单记录 iframe 嵌入充值页面时 URL 自动附带来源参数，写入数据库用于追踪分析。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 20:40:16 +08:00
erio	c083880cbc	docs+feat: 完善 README 帮助内容配置说明，支持多行文字 - README (中/英) 修正 NEXT_PUBLIC_PAY_HELP_* → PAY_HELP_* - 新增 PAYMENT_PROVIDERS 配置说明（两步配置服务商+渠道） - 说明帮助图片支持外部 URL 或本地 uploads/ 两种方式 - PAY_HELP_TEXT 支持 \n 换行，渲染为多行段落	2026-03-02 04:17:51 +08:00
erio	a9ea9d4862	feat: 帮助图片点击放大（lightbox）点击支付页右侧帮助区域的联系二维码图片，在屏幕正中以全屏遮罩放大展示；点击背景或再次点击可关闭。	2026-03-02 03:39:49 +08:00
erio	e170d5451e	fix: 帮助内容改为服务端变量经 API 下发，运行时可配无需重新构建	2026-03-02 02:46:51 +08:00
erio	e5424e6c5e	feat: 显式 PAYMENT_PROVIDERS 配置服务商，缺密钥启动即报错	2026-03-02 02:04:53 +08:00
erio	310fa1020f	fix: loadUserAndOrders 开始时重置 userNotFound，防止状态残留	2026-03-02 01:23:04 +08:00