Initial commit

src/app/(admin)/admin/payments/config-form.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { savePaymentConfig } from "@/actions/admin/payments";
+import { getErrorMessage } from "@/lib/errors";
+import { toast } from "sonner";
+
+interface Field {
+  key: string;
+  label: string;
+  placeholder?: string;
+  secret?: boolean;
+  type?: "text" | "checkboxes";
+  options?: { value: string; label: string }[];
+}
+
+interface Props {
+  provider: string;
+  fields: Field[];
+  currentConfig?: Record<string, string>;
+  enabled: boolean;
+}
+
+export function PaymentConfigForm({ provider, fields, currentConfig, enabled: initialEnabled }: Props) {
+  const [enabled, setEnabled] = useState(initialEnabled);
+  const [saving, setSaving] = useState(false);
+
+  // Track checkbox field values (comma-separated strings)
+  const [checkboxValues, setCheckboxValues] = useState<Record<string, Set<string>>>(() => {
+    const init: Record<string, Set<string>> = {};
+    for (const field of fields) {
+      if (field.type === "checkboxes") {
+        const raw = currentConfig?.[field.key] || "";
+        init[field.key] = new Set(raw.split(",").map((s) => s.trim()).filter(Boolean));
+      }
+    }
+    return init;
+  });
+
+  function toggleCheckbox(fieldKey: string, value: string) {
+    setCheckboxValues((prev) => {
+      const next = new Set(prev[fieldKey]);
+      if (next.has(value)) next.delete(value);
+      else next.add(value);
+      return { ...prev, [fieldKey]: next };
+    });
+  }
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setSaving(true);
+    const formData = new FormData(e.currentTarget);
+    const config: Record<string, string> = {};
+    for (const field of fields) {
+      if (field.type === "checkboxes") {
+        config[field.key] = Array.from(checkboxValues[field.key] ?? []).join(",");
+      } else {
+        config[field.key] = (formData.get(field.key) as string) || "";
+      }
+    }
+
+    try {
+      await savePaymentConfig(provider, config, enabled);
+      toast.success("保存成功");
+    } catch (error) {
+      toast.error(getErrorMessage(error, "保存失败"));
+    }
+    setSaving(false);
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="form-panel space-y-5">
+      <div className="grid gap-4 sm:grid-cols-2">
+        {fields.map((field) =>
+          field.type === "checkboxes" ? (
+            <div key={field.key} className="sm:col-span-2">
+              <Label>{field.label}</Label>
+              <div className="mt-3 flex flex-wrap gap-3">
+                {field.options?.map((opt) => (
+                  <label key={opt.value} className="choice-card flex cursor-pointer items-center gap-2 px-3 py-2">
+                    <input
+                      type="checkbox"
+                      className="size-4 rounded border-border accent-primary"
+                      checked={checkboxValues[field.key]?.has(opt.value) ?? false}
+                      onChange={() => toggleCheckbox(field.key, opt.value)}
+                    />
+                    <span className="text-sm">{opt.label}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div key={field.key}>
+              <Label>{field.label}</Label>
+              <Input
+                name={field.key}
+                type={field.secret ? "password" : "text"}
+                placeholder={field.placeholder}
+                defaultValue={currentConfig?.[field.key] || ""}
+              />
+            </div>
+          ),
+        )}
+      </div>
+      <div className="flex flex-col gap-3 border-t border-border/50 pt-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2">
+          <Switch checked={enabled} onCheckedChange={setEnabled} />
+          <span className="text-sm">{enabled ? "已启用" : "未启用"}</span>
+        </div>
+        <Button type="submit" size="sm" disabled={saving}>
+          {saving ? "保存中..." : "保存配置"}
+        </Button>
+      </div>
+    </form>
+  );
+}

src/app/(admin)/admin/payments/page.tsx

@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import { CreditCard } from "lucide-react";
+import { PageHeader, PageShell } from "@/components/shared/page-shell";
+import { ActiveStatusBadge } from "@/components/shared/status-badge";
+import { PaymentConfigForm } from "./config-form";
+import { getPaymentProviderConfigs } from "./payments-data";
+
+export const metadata: Metadata = {
+  title: "支付配置",
+  description: "配置支付渠道、密钥与启用状态。",
+};
+
+export default async function PaymentsPage() {
+  const providerConfigs = await getPaymentProviderConfigs();
+
+  return (
+    <PageShell>
+      <PageHeader
+        eyebrow="系统"
+        title="支付配置"
+      />
+      <div className="grid gap-5">
+        {providerConfigs.map(({ provider, config }) => (
+          <section key={provider.id} className="surface-card overflow-hidden rounded-xl p-4">
+            <div className="mb-4 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+              <div className="flex items-start gap-3">
+                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <CreditCard className="size-4" />
+                </span>
+                <div>
+                  <h3 className="text-lg font-semibold tracking-tight">{provider.name}</h3>
+                  <p className="mt-1 text-sm leading-6 text-muted-foreground text-pretty">{provider.description}</p>
+                </div>
+              </div>
+              <ActiveStatusBadge active={config?.enabled ?? false} activeLabel="已启用" inactiveLabel="未启用" />
+            </div>
+            <PaymentConfigForm
+              provider={provider.id}
+              fields={provider.fields}
+              currentConfig={config?.config as Record<string, string> | undefined}
+              enabled={config?.enabled ?? false}
+            />
+          </section>
+        ))}
+      </div>
+    </PageShell>
+  );
+}

src/app/(admin)/admin/payments/payments-data.ts

@@ -0,0 +1,12 @@
+import { prisma } from "@/lib/prisma";
+import { PAYMENT_PROVIDER_DEFINITIONS } from "@/services/payment/catalog";
+
+export async function getPaymentProviderConfigs() {
+  const configs = await prisma.paymentConfig.findMany();
+  const configMap = new Map(configs.map((config) => [config.provider, config]));
+
+  return PAYMENT_PROVIDER_DEFINITIONS.map((provider) => ({
+    provider,
+    config: configMap.get(provider.id),
+  }));
+}