oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(payment): code standards fixes and regression repairs

Browse Source 
Backend:
- Split payment_order.go (546→314 lines) into payment_order_lifecycle.go
- Replace magic strings with constants in factory, easypay, webhook handler
- Add rate limit/validity unit constants in payment_order_lifecycle, payment_service
- Fix critical regression: add PaymentEnabled to GetPublicSettings response
- Add missing migration 099_fix_migrated_purchase_menu_label_icon.sql

Frontend:
- Fix StripePopupView.vue: replace `as any` with typed interface, use extractApiErrorMessage
- Fix AdminOrderTable.vue: replace hardcoded column labels with i18n t() calls
- Fix SubscriptionsView.vue: replace hardcoded Today/Tomorrow with i18n
- Extract duplicate statusBadgeClass/canRefund/formatOrderDateTime to orderUtils.ts
- Add missing i18n keys: common.today, common.tomorrow, payment.orders.orderType/actions
- Remove dead PurchaseSubscriptionView.vue (replaced by PaymentView)
This commit is contained in:
erio
2026-04-11 00:25:41 +08:00
parent 27cd2f8e96
commit e3a000e0d4
18 changed files with 405 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/admin/payment/AdminOrderDetail.vue
View File

@@ -113,6 +113,7 @@
import { useI18n } from 'vue-i18n'
import BaseDialog from '@/components/common/BaseDialog.vue'
import type { PaymentOrder } from '@/types/payment'
import { statusBadgeClass, canRefund as canRefundStatus, formatOrderDateTime } from '@/components/payment/orderUtils'
const { t } = useI18n()
@@ -128,22 +129,11 @@ const emit = defineEmits<{
(e: 'refund', order: PaymentOrder): void
}>()
function statusBadgeClass(status: string): string {
const m: Record<string, string> = {
PENDING: 'badge-warning', PAID: 'badge-info', RECHARGING: 'badge-info',
COMPLETED: 'badge-success', EXPIRED: 'badge-secondary', CANCELLED: 'badge-secondary',
FAILED: 'badge-danger', REFUND_REQUESTED: 'badge-warning', REFUNDING: 'badge-warning',
PARTIALLY_REFUNDED: 'badge-warning', REFUNDED: 'badge-info', REFUND_FAILED: 'badge-danger',
}
return m[status] || 'badge-secondary'
}
function canRefund(order: PaymentOrder): boolean {
return ['COMPLETED', 'PARTIALLY_REFUNDED', 'REFUND_REQUESTED', 'REFUND_FAILED'].includes(order.status)
return canRefundStatus(order.status)
}
function formatDateTime(dateStr: string): string {
if (!dateStr) return '-'
return new Date(dateStr).toLocaleString()
return formatOrderDateTime(dateStr)
}
</script>

40
frontend/src/components/admin/payment/AdminOrderTable.vue
View File

@@ -108,7 +108,7 @@
<span class="text-xs">{{ t('payment.admin.retry') }}</span>
</button>
<button
v-if="canRefund(row)"
v-if="canRefundRow(row)"
@click="emit('refund', row)"
class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
>
@@ -139,6 +139,7 @@ import DataTable from '@/components/common/DataTable.vue'
import Pagination from '@/components/common/Pagination.vue'
import Select from '@/components/common/Select.vue'
import Icon from '@/components/icons/Icon.vue'
import { statusBadgeClass, canRefund, formatOrderDateTime } from '@/components/payment/orderUtils'
const { t } = useI18n()
@@ -179,16 +180,16 @@ function emitFiltersChanged() {
})
}
const columns: Column[] = [
{ key: 'id', label: 'ID' },
{ key: 'user_id', label: 'User' },
{ key: 'amount', label: 'Amount' },
{ key: 'payment_type', label: 'Method' },
{ key: 'status', label: 'Status' },
{ key: 'order_type', label: 'Type' },
{ key: 'created_at', label: 'Created' },
{ key: 'actions', label: 'Actions' },
]
const columns = computed<Column[]>(() => [
{ key: 'id', label: t('payment.orders.orderId') },
{ key: 'user_id', label: t('payment.orders.userId') },
{ key: 'amount', label: t('payment.orders.amount') },
{ key: 'payment_type', label: t('payment.orders.paymentMethod') },
{ key: 'status', label: t('payment.orders.status') },
{ key: 'order_type', label: t('payment.orders.orderType') },
{ key: 'created_at', label: t('payment.orders.createdAt') },
{ key: 'actions', label: t('payment.orders.actions') },
])
const statusFilterOptions = computed(() => [
{ value: '', label: t('payment.admin.allStatuses') },
@@ -216,22 +217,11 @@ const orderTypeFilterOptions = computed(() => [
{ value: 'subscription', label: t('payment.admin.subscriptionOrder') },
])
function statusBadgeClass(status: string): string {
const m: Record<string, string> = {
PENDING: 'badge-warning', PAID: 'badge-info', RECHARGING: 'badge-info',
COMPLETED: 'badge-success', EXPIRED: 'badge-secondary', CANCELLED: 'badge-secondary',
FAILED: 'badge-danger', REFUND_REQUESTED: 'badge-warning', REFUNDING: 'badge-warning',
PARTIALLY_REFUNDED: 'badge-warning', REFUNDED: 'badge-info', REFUND_FAILED: 'badge-danger',
}
return m[status] || 'badge-secondary'
}
function canRefund(order: PaymentOrder): boolean {
return ['COMPLETED', 'PARTIALLY_REFUNDED', 'REFUND_REQUESTED', 'REFUND_FAILED'].includes(order.status)
function canRefundRow(order: PaymentOrder): boolean {
return canRefund(order.status)
}
function formatDateTime(dateStr: string): string {
if (!dateStr) return '-'
return new Date(dateStr).toLocaleString()
return formatOrderDateTime(dateStr)
}
</script>

4
frontend/src/components/admin/payment/AdminRefundDialog.vue
View File

@@ -164,6 +164,7 @@ import { reactive, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseDialog from '@/components/common/BaseDialog.vue'
import type { PaymentOrder } from '@/types/payment'
import { formatOrderDateTime } from '@/components/payment/orderUtils'
const { t } = useI18n()
@@ -222,8 +223,7 @@ watch(() => props.show, (val) => {
})
function formatDateTime(dateStr: string): string {
if (!dateStr) return '-'
return new Date(dateStr).toLocaleString()
return formatOrderDateTime(dateStr)
}
function handleSubmit() {

34
frontend/src/components/payment/orderUtils.ts Normal file
View File

@@ -0,0 +1,34 @@
/**
* Shared utility functions for payment order display.
* Used by AdminOrderDetail, AdminOrderTable, AdminRefundDialog, AdminOrdersView, etc.
*/
const STATUS_BADGE_MAP: Record<string, string> = {
PENDING: 'badge-warning',
PAID: 'badge-info',
RECHARGING: 'badge-info',
COMPLETED: 'badge-success',
EXPIRED: 'badge-secondary',
CANCELLED: 'badge-secondary',
FAILED: 'badge-danger',
REFUND_REQUESTED: 'badge-warning',
REFUNDING: 'badge-warning',
PARTIALLY_REFUNDED: 'badge-warning',
REFUNDED: 'badge-info',
REFUND_FAILED: 'badge-danger',
}
const REFUNDABLE_STATUSES = ['COMPLETED', 'PARTIALLY_REFUNDED', 'REFUND_REQUESTED', 'REFUND_FAILED']
export function statusBadgeClass(status: string): string {
return STATUS_BADGE_MAP[status] || 'badge-secondary'
}
export function canRefund(status: string): boolean {
return REFUNDABLE_STATUSES.includes(status)
}
export function formatOrderDateTime(dateStr: string): string {
if (!dateStr) return '-'
return new Date(dateStr).toLocaleString()
}

4
frontend/src/i18n/locales/en.ts
View File

@@ -308,6 +308,8 @@ export default {
chooseFile: 'Choose File',
notAvailable: 'N/A',
now: 'Now',
today: 'Today',
tomorrow: 'Tomorrow',
unknown: 'Unknown',
minutes: 'min',
time: {
@@ -5237,6 +5239,8 @@ export default {
createdAt: 'Created',
cancel: 'Cancel Order',
userId: 'User ID',
orderType: 'Order Type',
actions: 'Actions',
requestRefund: 'Request Refund',
},
result: {

4
frontend/src/i18n/locales/zh.ts
View File

@@ -308,6 +308,8 @@ export default {
chooseFile: '选择文件',
notAvailable: '不可用',
now: '现在',
today: '今天',
tomorrow: '明天',
unknown: '未知',
minutes: '分钟',
time: {
@@ -5425,6 +5427,8 @@ export default {
createdAt: '创建时间',
cancel: '取消订单',
userId: '用户 ID',
orderType: '订单类型',
actions: '操作',
requestRefund: '申请退款',
},
result: {

3
frontend/src/views/admin/orders/AdminOrdersView.vue
View File

@@ -117,6 +117,7 @@ import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/app'
import { adminPaymentAPI } from '@/api/admin/payment'
import { extractApiErrorMessage } from '@/utils/apiError'
import { formatOrderDateTime } from '@/components/payment/orderUtils'
import type { PaymentOrder } from '@/types/payment'
import AppLayout from '@/components/layout/AppLayout.vue'
import Pagination from '@/components/common/Pagination.vue'
@@ -233,7 +234,7 @@ async function handleRefund(data: { amount: number; reason: string; deduct_balan
finally { refundSubmitting.value = false }
}
function formatDateTime(dateStr: string): string { if (!dateStr) return '-'; return new Date(dateStr).toLocaleString() }
function formatDateTime(dateStr: string): string { return formatOrderDateTime(dateStr) }
onMounted(() => loadOrders())
</script>

159
frontend/src/views/user/PurchaseSubscriptionView.vue
View File

@@ -1,159 +0,0 @@
<template>
<AppLayout>
<div class="purchase-page-layout">
<div class="card flex-1 min-h-0 overflow-hidden">
<div v-if="loading" class="flex h-full items-center justify-center py-12">
<div
class="h-8 w-8 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"
></div>
</div>
<div
v-else-if="!purchaseEnabled"
class="flex h-full items-center justify-center p-10 text-center"
>
<div class="max-w-md">
<div
class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700"
>
<Icon name="creditCard" size="lg" class="text-gray-400" />
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
{{ t('purchase.notEnabledTitle') }}
</h3>
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
{{ t('purchase.notEnabledDesc') }}
</p>
</div>
</div>
<div
v-else-if="!isValidUrl"
class="flex h-full items-center justify-center p-10 text-center"
>
<div class="max-w-md">
<div
class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700"
>
<Icon name="link" size="lg" class="text-gray-400" />
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
{{ t('purchase.notConfiguredTitle') }}
</h3>
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
{{ t('purchase.notConfiguredDesc') }}
</p>
</div>
</div>
<div v-else class="purchase-embed-shell">
<a
:href="purchaseUrl"
target="_blank"
rel="noopener noreferrer"
class="btn btn-secondary btn-sm purchase-open-fab"
>
<Icon name="externalLink" size="sm" class="mr-1.5" :stroke-width="2" />
{{ t('purchase.openInNewTab') }}
</a>
<iframe
:src="purchaseUrl"
class="purchase-embed-frame"
allowfullscreen
></iframe>
</div>
</div>
</div>
</AppLayout>
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores'
import { useAuthStore } from '@/stores/auth'
import AppLayout from '@/components/layout/AppLayout.vue'
import Icon from '@/components/icons/Icon.vue'
import { buildEmbeddedUrl, detectTheme } from '@/utils/embedded-url'
const { t, locale } = useI18n()
const appStore = useAppStore()
const authStore = useAuthStore()
const loading = ref(false)
const purchaseTheme = ref<'light' | 'dark'>('light')
let themeObserver: MutationObserver | null = null
const purchaseEnabled = computed(() => {
return appStore.cachedPublicSettings?.purchase_subscription_enabled ?? false
})
const purchaseUrl = computed(() => {
const baseUrl = (appStore.cachedPublicSettings?.purchase_subscription_url || '').trim()
return buildEmbeddedUrl(baseUrl, authStore.user?.id, authStore.token, purchaseTheme.value, locale.value)
})
const isValidUrl = computed(() => {
const url = purchaseUrl.value
return url.startsWith('http://') || url.startsWith('https://')
})
onMounted(async () => {
purchaseTheme.value = detectTheme()
if (typeof document !== 'undefined') {
themeObserver = new MutationObserver(() => {
purchaseTheme.value = detectTheme()
})
themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class'],
})
}
if (appStore.publicSettingsLoaded) return
loading.value = true
try {
await appStore.fetchPublicSettings()
} finally {
loading.value = false
}
})
onUnmounted(() => {
if (themeObserver) {
themeObserver.disconnect()
themeObserver = null
}
})
</script>
<style scoped>
.purchase-page-layout {
@apply flex flex-col;
height: calc(100vh - 64px - 4rem);
}
.purchase-embed-shell {
@apply relative;
@apply h-full w-full overflow-hidden rounded-2xl;
@apply bg-gradient-to-b from-gray-50 to-white dark:from-dark-900 dark:to-dark-950;
@apply p-0;
}
.purchase-open-fab {
@apply absolute right-3 top-3 z-10;
@apply shadow-sm backdrop-blur supports-[backdrop-filter]:bg-white/80 dark:supports-[backdrop-filter]:bg-dark-800/80;
}
.purchase-embed-frame {
display: block;
margin: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
</style>

9
frontend/src/views/user/StripePopupView.vue
View File

@@ -56,6 +56,11 @@
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { extractApiErrorMessage } from '@/utils/apiError'
interface StripeWithWechatPay {
confirmWechatPayPayment(clientSecret: string, options: Record<string, unknown>): Promise<{ error?: { message?: string }; paymentIntent?: { status: string } }>
}
const METHOD_COLORS: Record<string, string> = {
alipay: '#00AEEF',
@@ -123,7 +128,7 @@ async function initStripe(clientSecret: string, publishableKey: string) {
} else if (method === 'wechat_pay') {
// WeChat: Stripe shows its built-in QR dialog, user scans, promise resolves
hint.value = t('payment.stripePopup.loadingQr')
const result = await (stripe as any).confirmWechatPayPayment(clientSecret, {
const result = await (stripe as unknown as StripeWithWechatPay).confirmWechatPayPayment(clientSecret, {
payment_method_options: { wechat_pay: { client: 'web' } },
})
if (result.error) {
@@ -137,7 +142,7 @@ async function initStripe(clientSecret: string, publishableKey: string) {
}
}
} catch (err: unknown) {
error.value = err instanceof Error ? err.message : t('payment.stripeLoadFailed')
error.value = extractApiErrorMessage(err, t('payment.stripeLoadFailed'))
}
}

4
frontend/src/views/user/SubscriptionsView.vue
View File

@@ -313,10 +313,10 @@ function formatExpirationDate(expiresAt: string): string {
const dateStr = formatDateOnly(expires)
if (days === 0) {
return `${dateStr} (Today)`
return `${dateStr} (${t('common.today')})`
}
if (days === 1) {
return `${dateStr} (Tomorrow)`
return `${dateStr} (${t('common.tomorrow')})`
}
return t('userSubscriptions.daysRemaining', { days }) + ` (${dateStr})`