opensource/sub2api
3
0
Fork 0
mirror of https://github.com/Wei-Shaw/sub2api.git synced 2026-09-24 16:05:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(payment): merge supported types badges into provider card top row

Browse Source
This commit is contained in:
erio
2026-04-06 22:09:17 +08:00
parent c5864f5c19
commit c3a5cc685e
1 changed files with 17 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/admin/SettingsView.vue
+17 -23
View File
@@ -1728,20 +1728,31 @@
<div v-if="providersLoading && !providers.length" class="flex items-center justify-center py-6"><div class="h-5 w-5 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"></div></div>
<div v-else-if="providers.length" class="space-y-3">
<div v-for="provider in providers" :key="provider.id" :class="['rounded-lg border transition-all', isProviderEnabled(provider.provider_key) ? 'border-gray-200 dark:border-dark-600' : 'border-gray-200 bg-gray-50 dark:border-dark-700 dark:bg-dark-800/50']">
<div :class="['flex items-center justify-between px-4 py-3', !isProviderEnabled(provider.provider_key) && 'opacity-50 pointer-events-none']">
<!-- Left: icon + name + provider key badge -->
<div :class="['flex items-center justify-between px-4 py-2.5', !isProviderEnabled(provider.provider_key) && 'opacity-50 pointer-events-none']">
<!-- Left: icon + name + key badge + supported types badges -->
<div class="flex items-center gap-3">
<div :class="['rounded-md p-1.5', provider.enabled && isProviderEnabled(provider.provider_key) ? 'bg-green-100 dark:bg-green-900/30' : 'bg-gray-100 dark:bg-dark-700']">
<Icon name="server" size="sm" :class="provider.enabled && isProviderEnabled(provider.provider_key) ? 'text-green-600 dark:text-green-400' : 'text-gray-400'" />
</div>
<div>
<span class="text-sm font-medium text-gray-900 dark:text-white">{{ provider.name }}</span>
<span class="ml-1.5 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 dark:bg-dark-700 dark:text-gray-400">{{ providerKeyLabel(provider.provider_key) }}</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">{{ provider.name }}</span>
<span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 dark:bg-dark-700 dark:text-gray-400">{{ providerKeyLabel(provider.provider_key) }}</span>
<div v-if="isProviderEnabled(provider.provider_key)" class="flex items-center gap-1">
<button
v-for="pt in getProviderAvailableTypes(provider.provider_key)"
:key="pt.value"
type="button"
@click="toggleCardSupportedType(provider, pt.value)"
:class="[
'rounded px-2 py-0.5 text-xs font-medium transition-all',
isCardTypeSelected(provider, pt.value)
? 'bg-primary-500 text-white'
: 'bg-gray-100 text-gray-400 dark:bg-dark-700 dark:text-gray-500',
]"
>{{ pt.label }}</button>
</div>
</div>
<!-- Right: toggles + actions -->
<div class="flex items-center gap-4">
<!-- Enabled toggle -->
<label class="flex items-center gap-1.5 cursor-pointer">
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.enabled') }}</span>
<button type="button" role="switch" :aria-checked="provider.enabled" @click="toggleProviderField(provider, 'enabled')"
@@ -1749,7 +1760,6 @@
<span :class="['pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200', provider.enabled ? 'translate-x-4' : 'translate-x-0']" />
</button>
</label>
<!-- Refund toggle -->
<label class="flex items-center gap-1.5 cursor-pointer">
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.payment.refundEnabled') }}</span>
<button type="button" role="switch" :aria-checked="provider.refund_enabled" @click="toggleProviderField(provider, 'refundEnabled')"
@@ -1767,22 +1777,6 @@
<div v-if="!isProviderEnabled(provider.provider_key)" class="border-t border-gray-100 px-4 py-2 dark:border-dark-700">
<span class="text-xs text-amber-500">{{ t('admin.settings.payment.typeDisabled') }} — {{ t('admin.settings.payment.enableTypesFirst') }}</span>
</div>
<!-- Supported types badge row -->
<div v-else class="flex items-center gap-2 border-t border-gray-100 px-4 py-2 dark:border-dark-700">
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.payment.supportedTypes') }}:</span>
<button
v-for="pt in getProviderAvailableTypes(provider.provider_key)"
:key="pt.value"
type="button"
@click="toggleCardSupportedType(provider, pt.value)"
:class="[
'rounded px-2 py-0.5 text-xs font-medium transition-all',
isCardTypeSelected(provider, pt.value)
? 'bg-primary-500 text-white'
: 'bg-gray-100 text-gray-400 dark:bg-dark-700 dark:text-gray-500',
]"
>{{ pt.label }}</button>
</div>
</div>
</div>
<div v-else class="py-6 text-center">