充值页面支付方式增加stripe选项

dashboard/src/components/BuyPrepaidCreditsForm.vue

@@ -20,7 +20,7 @@
 
 	<div class="mt-4">
 		<div class="text-xs text-gray-600">{{ $t('Payment Method') }}</div>
-		<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
+		<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-3">
 			<label
 				class="payment-option"
 				:class="{'payment-option-active': paymentGateway === 'Alipay'}"
@@ -50,11 +50,26 @@
 					</svg>
 				</span>
 			</label>
+			
+			<label
+				class="payment-option"
+				:class="{'payment-option-active': paymentGateway === 'Stripe'}"
+			>
+				<div class="payment-icon">
+					<StripeLogo />
+				</div>
+				<input type="radio" v-model="paymentGateway" value="Stripe" class="hidden-radio">
+				<span class="checkmark-circle" v-if="paymentGateway === 'Stripe'">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="checkmark-icon">
+						<path fill="currentColor" d="M9.55 18l-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/>
+					</svg>
+				</span>
+			</label>
 		</div>
 	</div>
 
 	<div class="text-xs text-gray-500 mt-2 mb-4" v-if="$team.pg.currency === 'CNY'">
-		{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : $t('WeChat Pay') }) }}
+		{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : paymentGateway === 'WeChatPay' ? $t('WeChat Pay') : $t('Stripe') }) }}
 	</div>
 
 	<BuyPrepaidCreditsAlipay
@@ -74,20 +89,31 @@
 		@success="onSuccess"
 		@cancel="onCancel"
 	/>
+
+	<BuyPrepaidCreditsStripe
+		v-if="paymentGateway === 'Stripe'"
+		:amount="creditsToBuy"
+		:minimumAmount="minimumAmount"
+		@success="onSuccess"
+	/>
 </template>
 <script>
 import BuyPrepaidCreditsAlipay from './BuyPrepaidCreditsAlipay.vue';
 import BuyPrepaidCreditsWeChatPay from './BuyPrepaidCreditsWeChatPay.vue';
+import BuyPrepaidCreditsStripe from './BuyPrepaidCreditsStripe.vue';
 import AlipayLogo from '../logo/AlipayLogo.vue';
 import WeChatPayLogo from '../logo/WeChatPayLogo.vue';
+import StripeLogo from './StripeLogo.vue';
 
 export default {
 	name: 'BuyPrepaidCreditsForm',
 	components: {
 		BuyPrepaidCreditsAlipay,
 		BuyPrepaidCreditsWeChatPay,
+		BuyPrepaidCreditsStripe,
 		AlipayLogo,
-		WeChatPayLogo
+		WeChatPayLogo,
+		StripeLogo
 	},
 	data() {
 		return {
@@ -151,6 +177,11 @@ export default {
     box-shadow: 0 0 0 1px rgba(34, 172, 56, 0.1);
 }
 
+.payment-option-active:has(input[value="Stripe"]:checked) {
+    border-color: #6772e5;
+    box-shadow: 0 0 0 1px rgba(103, 114, 229, 0.1);
+}
+
 .payment-icon {
     display: flex;
     align-items: center;
@@ -162,7 +193,7 @@ export default {
     flex-shrink: 0;
 }
 
-.alipay-svg, .wechat-svg {
+.alipay-svg, .wechat-svg, .stripe-svg, .payment-icon svg {
     width: 100%;
     height: auto;
     max-height: 30px;

dashboard/src/components/StripeLogo.vue

@@ -2,8 +2,8 @@
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		xmlns:xlink="http://www.w3.org/1999/xlink"
-		width="119px"
-		height="26px"
+		viewBox="0 0 119 26"
+		class="stripe-svg"
 	>
 		<path
 			fill-rule="evenodd"

dashboard/vite.config.ts

@@ -11,7 +11,7 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 import vitePluginTranslate from './vite-plugin-translate.mjs';
 
 // 语言配置：设置目标语言，默认为 'en'（英文），可设置为 'zh'（中文）等
-const locale = process.env.DASHBOARD_LOCALE || 'zh';
+const locale = process.env.DASHBOARD_LOCALE || 'en';
 
 export default defineConfig({
 	plugins: [