feat(payment): 支付插件 - 接入支付FM官方标准插件 official-payment-zhifufm

web/src/pages/admin/payments/payments-page.tsx

@@ -1,4 +1,4 @@
-import { AlipayCircleFilled, WechatFilled } from "@ant-design/icons";
+import { PaymentBrandIcon } from "@/components/payment-brand-icons";
 import { Callout } from "@/pages/admin/ui/controls";
 import { App, Button, DatePicker, Descriptions, Drawer, Form, Input, InputNumber, Select, Tabs, Typography } from "antd";
 import { AdminDrawer } from "@/pages/admin/ui/overlays";
@@ -912,23 +912,6 @@ export default function AdminPaymentsPage() {
     );
 }
 
-function PaymentBrandIcon({ providerId, compact = false }: { providerId: string; compact?: boolean }) {
-    const size = compact ? "size-6" : "size-10";
-    if (providerId === "wechat-native")
-        return (
-            <span className={`grid ${size} shrink-0 place-items-center rounded-lg bg-[#07c160]/10 text-[#07c160]`}>
-                <WechatFilled className={compact ? "text-sm" : "text-xl"} aria-hidden />
-            </span>
-        );
-    if (providerId === "alipay-page-pay")
-        return (
-            <span className={`grid ${size} shrink-0 place-items-center rounded-lg bg-[#1677ff]/10 text-[#1677ff]`}>
-                <AlipayCircleFilled className={compact ? "text-sm" : "text-xl"} aria-hidden />
-            </span>
-        );
-    return <span className={`grid ${size} shrink-0 place-items-center rounded-lg bg-muted text-xs`}>PAY</span>;
-}
-
 function formatDateTime(value: string) {
     return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
 }

web/src/pages/admin/plugins/plugins-page.tsx

@@ -1,6 +1,7 @@
 import { App, Button, Input, Select } from "antd";
 import { Switch } from "@/pages/admin/ui/controls";
 import { AlipayCircleFilled, WechatFilled } from "@ant-design/icons";
+import { ZHIFUFM_LOGO_SRC } from "@/components/payment-brand-icons";
 import type { ColumnsType } from "antd/es/table";
 import { CloudUpload, PlugZap, RefreshCw, Search, Trash2, UsersRound } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
@@ -350,6 +351,13 @@ function PluginBrandIcon({ pluginId }: { pluginId: string }) {
             </span>
         );
     }
+    if (pluginId === "official-payment-zhifufm") {
+        return (
+            <span className="grid size-9 shrink-0 place-items-center rounded-lg overflow-hidden border border-border/40 bg-card shadow-xs">
+                <img src={ZHIFUFM_LOGO_SRC} alt="支付FM" className="size-full object-contain select-none pointer-events-none rounded-lg" />
+            </span>
+        );
+    }
     return (
         <span className="grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-foreground/65">
             <PlugZap className="size-4" aria-hidden="true" />