From a8e68da0769b1375f46c9f41390e21a911447636 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 28 Dec 2025 23:36:50 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E4=B8=AD=E6=96=87=E6=9B=BF=E6=8D=A2=E4=B8=BA=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=BF=BB=E8=AF=91=E7=9A=84=E8=8B=B1=E6=96=871?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BuyPrepaidCreditsAlipay.vue    | 18 +++----
 .../src/components/BuyPrepaidCreditsForm.vue  | 10 ++--
 .../components/BuyPrepaidCreditsWeChatPay.vue | 29 +++++-----
 .../src/components/billing/BillingSummary.vue | 23 ++++----
 .../components/billing/PrepaidCreditsForm.vue | 10 ++--
 dashboard/src/pages/BillingInvoices.vue       | 54 +++++++++----------
 6 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/dashboard/src/components/BuyPrepaidCreditsAlipay.vue b/dashboard/src/components/BuyPrepaidCreditsAlipay.vue
index 37ea8e0..8ad43ed 100644
--- a/dashboard/src/components/BuyPrepaidCreditsAlipay.vue
+++ b/dashboard/src/components/BuyPrepaidCreditsAlipay.vue
@@ -11,7 +11,7 @@
 				:loading="$resources.createAlipayOrder.loading || loading"
 				@click="processAlipayPayment"
 			>
-				使用支付宝支付
+				{{ $t('Pay with Alipay') }}
 			</Button>
 		</div>
 	</div>
@@ -49,18 +49,18 @@ export default {
 				},
 				validate() {
 					if (this.amount <= 0) {
-						throw new DashboardError('支付金额必须大于0');
+						throw new DashboardError(this.$t('Payment amount must be greater than 0'));
 					}
 					if (this.amount < this.minimumAmount) {
-						throw new DashboardError('金额低于最低要求金额');
+						throw new DashboardError(this.$t('Amount is below the minimum required amount'));
 					}
 				},
 				onSuccess(response) {
 					window.open(response.payment_url, '_blank');
 					
-					toast.success('支付页面已在新窗口打开');
+					toast.success(this.$t('Payment page opened in new window'));
 					
-					// 如果需要检查支付状态
+					// Optional: check payment status
 					// this.checkPaymentStatus(response.order_id);
 				}
 			};
@@ -71,7 +71,7 @@ export default {
 			this.$resources.createAlipayOrder.submit();
 		},
 		
-		// 可选：检查支付状态的方法
+		// Optional: method to check payment status
 		checkPaymentStatus(orderId) {
 			const checkInterval = setInterval(() => {
 				this.$call('jcloud.api.billing.check_payment_status', {
@@ -80,15 +80,15 @@ export default {
 				}).then(result => {
 					if (result && result.status === 'Success') {
 						clearInterval(checkInterval);
-						toast.success('支付成功！账户已充值');
+						toast.success(this.$t('Payment successful! Account has been recharged'));
 						this.$emit('payment-success');
 					}
 				}).catch(err => {
-					console.error('检查支付状态出错:', err);
+					console.error('Error checking payment status:', err);
 				});
 			}, 3000);
 			
-			// 5分钟后停止检查
+			// Stop checking after 5 minutes
 			setTimeout(() => {
 				clearInterval(checkInterval);
 			}, 300000);
diff --git a/dashboard/src/components/BuyPrepaidCreditsForm.vue b/dashboard/src/components/BuyPrepaidCreditsForm.vue
index 503aec6..878be7a 100644
--- a/dashboard/src/components/BuyPrepaidCreditsForm.vue
+++ b/dashboard/src/components/BuyPrepaidCreditsForm.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<FormControl
-			:label="`支付金额`"
+			:label="$t('Payment Amount')"
 			class="mb-3"
 			v-model.number="creditsToBuy"
 			name="amount"
@@ -19,7 +19,7 @@
 	</div>
 
 	<div class="mt-4">
-		<div class="text-xs text-gray-600">支付方式</div>
+		<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">
 			<label
 				class="payment-option"
@@ -54,7 +54,7 @@
 	</div>
 
 	<div class="text-xs text-gray-500 mt-2 mb-4" v-if="$team.pg.currency === 'CNY'">
-		使用{{ paymentGateway === 'Alipay' ? '支付宝' : '微信' }}支付，快速便捷，余额将在支付成功后立即到账。
+		{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : $t('WeChat Pay') }) }}
 	</div>
 
 	<BuyPrepaidCreditsAlipay
@@ -91,7 +91,7 @@ export default {
 	},
 	data() {
 		return {
-			paymentGateway: 'Alipay', // 默认使用支付宝
+			paymentGateway: 'Alipay', // Default to Alipay
 			creditsToBuy: this.minimumAmount || 0,
 			amountError: ''
 		};
@@ -208,7 +208,7 @@ export default {
     background-color: #22AC38;
 }
 
-/* 响应式设计 */
+/* Responsive design */
 @media (max-width: 640px) {
     .payment-options {
         flex-direction: column;
diff --git a/dashboard/src/components/BuyPrepaidCreditsWeChatPay.vue b/dashboard/src/components/BuyPrepaidCreditsWeChatPay.vue
index 517b442..ca4d575 100644
--- a/dashboard/src/components/BuyPrepaidCreditsWeChatPay.vue
+++ b/dashboard/src/components/BuyPrepaidCreditsWeChatPay.vue
@@ -11,11 +11,11 @@
 				:loading="$resources.createWeChatPayOrder.loading || loading"
 				@click="processWeChatPayment"
 			>
-				使用微信支付
+				{{ $t('Pay with WeChat Pay') }}
 			</Button>
 		</div>
 		
-		<!-- 使用Teleport将弹窗移到body下 -->
+		<!-- Use Teleport to move modal to body -->
 		<Teleport to="body">
 			<div v-if="showQRCode" class="wechat-qrcode-overlay">
 				<div class="wechat-qrcode-modal">
@@ -31,20 +31,20 @@
 					</div>
 					
 					<div class="text-center mb-5">
-						<div class="text-sm text-gray-600 mb-2">扫一扫付款（元）</div>
-						<div class="text-3xl font-bold text-[#FF0036]">{{ amount }} 元</div>
+						<div class="text-sm text-gray-600 mb-2">{{ $t('Scan to Pay (CNY)') }}</div>
+						<div class="text-3xl font-bold text-[#FF0036]">{{ amount }} {{ $t('CNY') }}</div>
 					</div>
 					
 					<div class="flex justify-center">
 						<div v-if="qrCodeImage" class="qrcode-container">
-							<img :src="qrCodeImage" alt="微信支付二维码" class="qrcode-image" />
+							<img :src="qrCodeImage" :alt="$t('WeChat Pay QR Code')" class="qrcode-image" />
 						</div>
 						<div v-else class="qrcode-loading"></div>
 					</div>
 					
 					<div class="mt-5 text-center text-sm">
-						<div class="text-gray-600">请使用微信扫描二维码完成支付</div>
-						<div class="text-gray-500 mt-1">二维码有效期 15 分钟</div>
+						<div class="text-gray-600">{{ $t('Please scan the QR code with WeChat to complete payment') }}</div>
+						<div class="text-gray-500 mt-1">{{ $t('QR code valid for 15 minutes') }}</div>
 					</div>
 				</div>
 			</div>
@@ -55,7 +55,7 @@
 <script>
 import { toast } from 'vue-sonner';
 import { DashboardError } from '../utils/error';
-import { Teleport } from 'vue'; // 确保导入Teleport
+import { Teleport } from 'vue'; // Ensure Teleport is imported
 import WeChatPayLogo from '../logo/WeChatPayLogo.vue';
 
 export default {
@@ -94,14 +94,14 @@ export default {
 				},
 				validate() {
 					if (this.amount <= 0) {
-						throw new DashboardError('支付金额必须大于0');
+						throw new DashboardError(this.$t('Payment amount must be greater than 0'));
 					}
 					if (this.amount < this.minimumAmount) {
-						throw new DashboardError('金额低于最低要求金额');
+						throw new DashboardError(this.$t('Amount is below the minimum required amount'));
 					}
 				},
 				onSuccess(response) {
-					console.log('微信支付响应:', response);
+					console.log('WeChat Pay response:', response);
 					this.orderId = response.order_id;
 					this.qrCodeUrl = response.qr_code_url;
 					this.qrCodeImage = response.qr_code_image;
@@ -118,11 +118,12 @@ export default {
 					payment_type: 'wechatpay'
 				},
 				onSuccess(data) {
+					// Check for success status (handles both English and Chinese status values from backend)
 					if (data && (data.status === 'Success' || data.status === '已支付' || data.status === '交易成功')) {
 						this.stopPaymentCheck();
 						this.closeQRCode();
 						this.$emit('payment-success');
-						toast.success('支付成功');
+						toast.success(this.$t('Payment successful'));
 					}
 				}
 			};
@@ -181,7 +182,7 @@ export default {
 	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
 }
 
-/* 全新的弹窗样式 */
+/* Modal overlay styles */
 .wechat-qrcode-overlay {
 	position: fixed;
 	top: 0;
@@ -192,7 +193,7 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	z-index: 99999; /* 极高的z-index确保在最上层 */
+	z-index: 99999; /* Very high z-index to ensure it's on top */
 }
 
 .wechat-qrcode-modal {
diff --git a/dashboard/src/components/billing/BillingSummary.vue b/dashboard/src/components/billing/BillingSummary.vue
index c1b7a4a..8809cec 100644
--- a/dashboard/src/components/billing/BillingSummary.vue
+++ b/dashboard/src/components/billing/BillingSummary.vue
@@ -4,9 +4,9 @@
 			<div class="flex flex-col gap-2.5 px-4 py-3">
 				<div class="flex items-center justify-between">
 					<div class="flex flex-col gap-1.5">
-						<div class="text-lg font-semibold">账单费用</div>
+						<div class="text-lg font-semibold">{{ t('Billing Charges') }}</div>
 						<div class="text-gray-700">
-							<span>下次扣款日期 — </span>
+							<span>{{ t('Next billing date') }} — </span>
 							<span>{{ currentMonthEnd() }}</span>
 						</div>
 					</div>
@@ -15,14 +15,14 @@
 					<div class="flex gap-2 text-gray-700">
 						<i-lucide-credit-card class="h-4 w-4" />
 						<div>
-							<span>当前账单金额为 </span>
+							<span>{{ t('Current billing amount is') }} </span>
 							<span class="font-medium text-gray-900">
 								{{ currency }} {{ currentBillingAmount?.toFixed(2) || '0.00' }}
 							</span>
 						</div>
 					</div>
 					<div>
-						<Button label="查看账单明细" @click="showInvoiceDialog = true" />
+						<Button :label="t('View Invoice Details')" @click="showInvoiceDialog = true" />
 					</div>
 				</div>
 			</div>
@@ -33,12 +33,12 @@
 				<div class="flex h-7 items-center gap-2 text-gray-800">
 					<i-lucide-receipt class="h-4 w-4" />
 					<div>
-						<span>未支付金额为 </span>
+						<span>{{ t('Unpaid amount is') }} </span>
 						<span>{{ currency }} {{ unpaidAmount.data?.toFixed(2) }}</span>
 					</div>
 				</div>
 				<div>
-					<Button variant="solid" label="立即支付" @click="payNow" />
+					<Button variant="solid" :label="t('Pay Now')" @click="payNow" />
 				</div>
 			</div>
 		</div>
@@ -56,8 +56,10 @@ import UpcomingInvoiceDialog from './UpcomingInvoiceDialog.vue';
 import { Button, createResource } from 'jingrow-ui';
 import { ref, computed, inject } from 'vue';
 import { confirmDialog } from '../../utils/components';
+import { useI18n } from '../../composables/useI18n';
 import router from '../../router';
 
+const { t } = useI18n();
 const team = inject('team');
 const { currentBillingAmount, upcomingInvoice, unpaidInvoices } =
 	inject('billing');
@@ -76,7 +78,7 @@ const unpaidAmount = createResource({
 const currentMonthEnd = () => {
 	const date = new Date();
 	const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-	return lastDay.toLocaleDateString('zh-CN', {
+	return lastDay.toLocaleDateString('en-US', {
 		year: 'numeric',
 		month: 'long',
 		day: 'numeric'
@@ -96,11 +98,10 @@ function payUnpaidInvoices() {
 			showAddPrepaidCreditsDialog.value = true;
 		} else {
 			confirmDialog({
-				title: '多张未支付发票',
-				message:
-					'您有多张未支付发票。请从发票页面支付它们',
+				title: t('Multiple Unpaid Invoices'),
+				message: t('You have multiple unpaid invoices. Please pay them from the invoices page.'),
 				primaryAction: {
-					label: '前往发票',
+					label: t('Go to Invoices'),
 					variant: 'solid',
 					onClick: ({ hide }) => {
 						router.push({ name: 'BillingInvoices' });
diff --git a/dashboard/src/components/billing/PrepaidCreditsForm.vue b/dashboard/src/components/billing/PrepaidCreditsForm.vue
index 1ba4082..f287134 100644
--- a/dashboard/src/components/billing/PrepaidCreditsForm.vue
+++ b/dashboard/src/components/billing/PrepaidCreditsForm.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<FormControl
-			:label="`支付金额`"
+			:label="$t('Payment Amount')"
 			class="mb-3"
 			v-model.number="creditsToBuy"
 			name="amount"
@@ -18,7 +18,7 @@
 	</div>
 
 	<div class="mt-4">
-		<div class="text-xs text-gray-600">支付方式</div>
+		<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">
 			<label
 				class="payment-option"
@@ -53,7 +53,7 @@
 	</div>
 
 	<div class="text-xs text-gray-500 mt-2 mb-4" v-if="$team.pg.currency === 'CNY'">
-		使用{{ paymentGateway === 'Alipay' ? '支付宝' : '微信' }}支付，快速便捷，余额将在支付成功后立即到账。
+		{{ $t('Pay with {method}, fast and convenient. Balance will be credited immediately after successful payment.', { method: paymentGateway === 'Alipay' ? $t('Alipay') : $t('WeChat Pay') }) }}
 	</div>
 
 	<BuyPrepaidCreditsAlipay
@@ -86,7 +86,7 @@ export default {
 	},
 	data() {
 		return {
-			paymentGateway: 'Alipay', // 默认使用支付宝
+			paymentGateway: 'Alipay', // Default to Alipay
 			creditsToBuy: this.minimumAmount
 		};
 	},
@@ -215,7 +215,7 @@ export default {
     background-color: #22AC38;
 }
 
-/* 响应式设计 */
+/* Responsive design */
 @media (max-width: 640px) {
     .payment-options {
         flex-direction: column;
diff --git a/dashboard/src/pages/BillingInvoices.vue b/dashboard/src/pages/BillingInvoices.vue
index 4738b4c..9e3dbdb 100644
--- a/dashboard/src/pages/BillingInvoices.vue
+++ b/dashboard/src/pages/BillingInvoices.vue
@@ -11,7 +11,7 @@
 						v-if="showInvoice.status === 'Empty'"
 						class="text-base text-gray-600"
 					>
-						无内容显示
+						{{ $t('No content to display') }}
 					</div>
 					<InvoiceTable v-else :invoiceId="showInvoice.name" />
 				</template>
@@ -75,43 +75,43 @@ export default {
 					return [
 						{
 							type: 'select',
-							label: '类型',
+							label: this.$t('Type'),
 							class: !this.$isMobile ? 'w-36' : '',
 							fieldname: 'type',
 							options: [
 								{ label: '', value: '' },
-								{ label: '订阅', value: 'Subscription' },
-								{ label: '余额支付', value: 'Prepaid Credits' },
+								{ label: this.$t('Subscription'), value: 'Subscription' },
+								{ label: this.$t('Prepaid Credits'), value: 'Prepaid Credits' },
 							],
 						},
 						{
 							type: 'select',
-							label: '状态',
+							label: this.$t('Status'),
 							class: !this.$isMobile ? 'w-36' : '',
 							fieldname: 'status',
 							options: [
 								{ label: '', value: '' },
-								{ label: '待开具', value: 'Draft' },
-								{ label: '已创建', value: 'Invoice Created' },
-								{ label: '未支付', value: 'Unpaid' },
-								{ label: '已支付', value: 'Paid' },
-								{ label: '已退款', value: 'Refunded' },
-								{ label: '无法收款', value: 'Uncollectible' },
-								{ label: '已收款', value: 'Collected' },
-								{ label: '空白', value: 'Empty' },
+								{ label: this.$t('Draft'), value: 'Draft' },
+								{ label: this.$t('Invoice Created'), value: 'Invoice Created' },
+								{ label: this.$t('Unpaid'), value: 'Unpaid' },
+								{ label: this.$t('Paid'), value: 'Paid' },
+								{ label: this.$t('Refunded'), value: 'Refunded' },
+								{ label: this.$t('Uncollectible'), value: 'Uncollectible' },
+								{ label: this.$t('Collected'), value: 'Collected' },
+								{ label: this.$t('Empty'), value: 'Empty' },
 							],
 						},
 					];
 				},
 				columns: [
 					{
-						label: '发票',
+						label: this.$t('Invoice'),
 						fieldname: 'name',
 						class: 'font-medium',
 						format(value, row) {
 							if (row.type == 'Subscription') {
 								let end = dayjsLocal(row.period_end);
-                                // 修改为 YYYY-MM 格式
+                                // Format as YYYY-MM
                                 return end.format('YYYY-MM'); 
                             } else if (row.type == 'Partnership Fees') {
                                 return 'Partnership Fees';
@@ -121,41 +121,41 @@ export default {
 						width: 0.8,
 					},
 					{
-						label: '状态',
+						label: this.$t('Status'),
 						fieldname: 'status',
 						type: 'Badge',
 						width: '150px',
 					},
 					{
-						label: '日期',
+						label: this.$t('Date'),
 						fieldname: 'due_date',
 						format(value, row) {
 							if (row.type == 'Subscription') {
 								let start = dayjsLocal(row.period_start);
 								let end = dayjsLocal(row.period_end);
-                                // 确保格式为 YYYY-MM-DD
+                                // Format as YYYY-MM-DD
                                 return `${start.format('YYYY-MM-DD')} - ${end.format('YYYY-MM-DD')}`; 
                             }
-                            // 确保格式为 YYYY-MM-DD
+                            // Format as YYYY-MM-DD
                             return dayjsLocal(value).format('YYYY-MM-DD'); 
 						},
 					},
 					{
-						label: '总计',
+						label: this.$t('Total'),
 						fieldname: 'total',
 						format: this.formatCurrency,
 						align: 'right',
 						width: 0.6,
 					},
 					{
-						label: '已支付金额',
+						label: this.$t('Amount Paid'),
 						fieldname: 'amount_paid',
 						format: this.formatCurrency,
 						align: 'right',
 						width: 0.6,
 					},
 					{
-						label: '应付金额',
+						label: this.$t('Amount Due'),
 						fieldname: 'amount_due',
 						format: this.formatCurrency,
 						align: 'right',
@@ -168,7 +168,7 @@ export default {
 						Button: ({ row }) => {
 							if (row.invoice_pdf || row.mpesa_invoice_pdf) {
 								return {
-									label: '下载发票',
+									label: this.$t('Download Invoice'),
 									slots: {
 										prefix: icon('download'),
 									},
@@ -183,7 +183,7 @@ export default {
 							}
 							if (row.status === 'Unpaid' && row.amount_due > 0) {
 								return {
-									label: '立即支付',
+									label: this.$t('Pay Now'),
 									slots: {
 										prefix: icon('external-link'),
 									},
@@ -210,10 +210,10 @@ export default {
 									onClick(e) {
 										e.stopPropagation();
 										confirmDialog({
-											title: '支付失败',
-											message: `<div class="space-y-4"><p class="text-base">您使用尾号为 <strong>${row.stripe_payment_failed_card}</strong> 的卡支付此发票失败，原因如下：</p><div class="text-sm font-mono text-gray-600 rounded p-2 bg-gray-100">${row.stripe_payment_error}</div><p class="text-base">请更改您的支付方式以支付此发票。</p></div>`,
+											title: this.$t('Payment Failed'),
+											message: `<div class="space-y-4"><p class="text-base">${this.$t('Payment for this invoice failed using card ending in')} <strong>${row.stripe_payment_failed_card}</strong>. ${this.$t('Reason:')}</p><div class="text-sm font-mono text-gray-600 rounded p-2 bg-gray-100">${row.stripe_payment_error}</div><p class="text-base">${this.$t('Please update your payment method to pay this invoice.')}</p></div>`,
 											primaryAction: {
-												label: '更改支付方式',
+												label: this.$t('Update Payment Method'),
 												variant: 'solid',
 												onClick: ({ hide }) => {
 													hide();