Files
sub2api/frontend/src/components/payment/ToggleSwitch.vue
erio 98140f6cac feat(payment): add recharge fee rate setting and fix provider card UI
- Add recharge_fee_rate system setting (percentage fee on top of recharge amount)
- Full backend chain: config constant, PaymentConfig struct, update validation,
  read/write persistence, DTO, handler GET/PUT responses
- Frontend: settings input with preview, i18n (zh/en), API types
- Fix provider card toggle layout: labels above switches to save width
- Fix Chinese translation: "EasyPay" → "易支付" in provider description
2026-04-15 01:27:24 +08:00

26 lines
880 B
Vue

<template>
<label class="flex flex-col items-center gap-0.5 cursor-pointer">
<span class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ label }}</span>
<button
type="button"
role="switch"
:aria-checked="checked"
@click="emit('toggle')"
:class="[
'relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200',
checked ? 'bg-primary-500' : 'bg-gray-300 dark:bg-dark-600',
]"
>
<span :class="[
'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200',
checked ? 'translate-x-4' : 'translate-x-0',
]" />
</button>
</label>
</template>
<script setup lang="ts">
defineProps<{ label: string; checked: boolean }>()
const emit = defineEmits<{ toggle: [] }>()
</script>