Spaces:

duqing2026
/

codex-ai-platform

Sleeping

App Files Files Community

3v324v23 commited on 21 days ago

Commit

d87f8bc

1 Parent(s): 070e95d

feat：微信/支付宝的图标，用react-icons 统一管理，因为lucide-react图标库没有这两个

Browse files

Files changed (4) hide show

index.html +1 -1
public/favicon.ico +0 -0
src/components/PaymentIcons.tsx +25 -0
src/pages/dashboard/Billing.tsx +12 -9

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My Trae Project</title>
     <script type="module">

 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My Trae Project</title>
     <script type="module">

public/favicon.ico ADDED Viewed

src/components/PaymentIcons.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import React from 'react';
+export const AlipayIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M2.541 0H13.5a2.55 2.55 0 0 1 2.54 2.563v8.297c-.006 0-.531-.046-2.978-.813-.412-.14-.916-.327-1.479-.536q-.456-.17-.957-.353a13 13 0 0 0 1.325-3.373H8.822V4.649h3.831v-.634h-3.83V2.121H7.26c-.274 0-.274.273-.274.273v1.621H3.11v.634h3.875v1.136h-3.2v.634H9.99c-.227.789-.532 1.53-.894 2.202-2.013-.67-4.161-1.212-5.51-.878-.864.214-1.42.597-1.746.998-1.499 1.84-.424 4.633 2.741 4.633 1.872 0 3.675-1.053 5.072-2.787 2.08 1.008 6.37 2.738 6.387 2.745v.105A2.55 2.55 0 0 1 13.5 16H2.541A2.55 2.55 0 0 1 0 13.437V2.563A2.55 2.55 0 0 1 2.541 0" />
+    <path d="M2.309 9.27c-1.22 1.073-.49 3.034 1.978 3.034 1.434 0 2.868-.925 3.994-2.406-1.602-.789-2.959-1.353-4.425-1.207-.397.04-1.14.217-1.547.58Z" />
+  </svg>
+);
+export const WechatIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M11.176 14.429c-2.665 0-4.826-1.8-4.826-4.018 0-2.22 2.159-4.02 4.824-4.02S16 8.191 16 10.411c0 1.21-.65 2.301-1.666 3.036a.32.32 0 0 0-.12.366l.218.81a.6.6 0 0 1 .029.117.166.166 0 0 1-.162.162.2.2 0 0 1-.092-.03l-1.057-.61a.5.5 0 0 0-.256-.074.5.5 0 0 0-.142.021 5.7 5.7 0 0 1-1.576.22M9.064 9.542a.647.647 0 1 0 .557-1 .645.645 0 0 0-.646.647.6.6 0 0 0 .09.353Zm3.232.001a.646.646 0 1 0 .546-1 .645.645 0 0 0-.644.644.63.63 0 0 0 .098.356"/>
+    <path d="M0 6.826c0 1.455.781 2.765 2.001 3.656a.385.385 0 0 1 .143.439l-.161.6-.1.373a.5.5 0 0 0-.032.14.19.19 0 0 0 .193.193q.06 0 .111-.029l1.268-.733a.6.6 0 0 1 .308-.088q.088 0 .171.025a6.8 6.8 0 0 0 1.625.26 4.5 4.5 0 0 1-.177-1.251c0-2.936 2.785-5.02 5.824-5.02l.15.002C10.587 3.429 8.392 2 5.796 2 2.596 2 0 4.16 0 6.826m4.632-1.555a.77.77 0 1 1-1.54 0 .77.77 0 0 1 1.54 0m3.875 0a.77.77 0 1 1-1.54 0 .77.77 0 0 1 1.54 0"/>
+  </svg>
+);

src/pages/dashboard/Billing.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Check, CreditCard, Loader2, CheckCircle2, AlertCircle, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 import { useStore } from '@/store/useStore';
@@ -319,25 +320,27 @@ export default function BillingPage() {
               className={`
                 flex items-center justify-center gap-3 p-4 rounded-xl border-2 transition-all
                 ${paymentGateway === 'alipay'
-                  ? 'border-blue-500 bg-blue-50 text-blue-700'
-                  : 'border-zinc-100 hover:border-zinc-200'}
               `}
             >
-              <img src="https://img.alicdn.com/tfs/TB199S7Xrr1gK0jSZFDXXb9yVXa-200-200.png" alt="Alipay" className="w-6 h-6 object-contain" />
-              <span className="font-medium">{t('billing.alipay')}</span>
             </button>
             <button
               onClick={() => setPaymentGateway('wechat')}
               className={`
-                flex items-center justify-center gap-3 p-4 rounded-xl border-2 transition-all opacity-60
                 ${paymentGateway === 'wechat'
-                  ? 'border-green-500 bg-green-50 text-green-700'
-                  : 'border-zinc-100 hover:border-zinc-200'}
               `}
             >
-              <img src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.png" alt="WeChat" className="w-6 h-6 object-contain" />
-              <span className="font-medium">{t('billing.wechat')}</span>
             </button>
           </div>

 import React, { useState, useEffect, useRef } from 'react';
 import { Check, CreditCard, Loader2, CheckCircle2, AlertCircle, X } from 'lucide-react';
+import { AlipayIcon, WechatIcon } from '@/components/PaymentIcons';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 import { useStore } from '@/store/useStore';
               className={`
                 flex items-center justify-center gap-3 p-4 rounded-xl border-2 transition-all
                 ${paymentGateway === 'alipay'
+                  ? 'border-blue-600 bg-blue-50/50 text-blue-600 shadow-sm'
+                  : 'border-zinc-100 bg-white hover:border-zinc-200 text-zinc-600'}
               `}
             >
+              <AlipayIcon className="w-6 h-6 shrink-0 text-[#1677FF] rounded-full" />
+              <span className="font-bold text-[15px]">{t('billing.alipay')}</span>
             </button>
             <button
               onClick={() => setPaymentGateway('wechat')}
               className={`
+                flex items-center justify-center gap-3 p-4 rounded-xl border-2 transition-all
                 ${paymentGateway === 'wechat'
+                  ? 'border-green-500 bg-green-50/50 text-green-700 shadow-sm'
+                  : 'border-zinc-100 bg-white hover:border-zinc-200 text-zinc-600'}
               `}
             >
+              <div className="w-6 h-6 shrink-0 bg-[#07C160] rounded-full flex items-center justify-center">
+                <WechatIcon className="w-4 h-4 text-white" />
+              </div>
+              <span className="font-bold text-[15px]">{t('billing.wechat')}</span>
             </button>
           </div>