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

feat(notify): add global toggles, percentage threshold, and visibility control

Browse Source 
- Add global toggle for account quota notification in admin settings
- Add percentage-based threshold type for per-account quota alerts
- Hide balance notify card on user profile when global toggle is off
- Expose balance_low_notify_enabled and account_quota_notify_enabled in PublicSettings
- Add threshold type (fixed/percentage) to QuotaNotifyToggle with $ / % switcher
This commit is contained in:
erio
2026-04-12 17:49:58 +08:00
parent 889b5b4f3b
commit eba289a7ff
15 changed files with 164 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/api/admin/settings.ts
View File

@@ -138,6 +138,7 @@ export interface SystemSettings {
// Balance & quota notification
balance_low_notify_enabled: boolean
balance_low_notify_threshold: number
account_quota_notify_enabled: boolean
account_quota_notify_emails: string[]
}
@@ -241,6 +242,7 @@ export interface UpdateSettingsRequest {
// Balance & quota notification
balance_low_notify_enabled?: boolean
balance_low_notify_threshold?: number
account_quota_notify_enabled?: boolean
account_quota_notify_emails?: string[]
}

24
frontend/src/components/account/EditAccountModal.vue
View File

@@ -1188,10 +1188,13 @@
:resetTimezone="editResetTimezone"
:quotaNotifyDailyEnabled="editQuotaNotifyDailyEnabled"
:quotaNotifyDailyThreshold="editQuotaNotifyDailyThreshold"
:quotaNotifyDailyThresholdType="editQuotaNotifyDailyThresholdType"
:quotaNotifyWeeklyEnabled="editQuotaNotifyWeeklyEnabled"
:quotaNotifyWeeklyThreshold="editQuotaNotifyWeeklyThreshold"
:quotaNotifyWeeklyThresholdType="editQuotaNotifyWeeklyThresholdType"
:quotaNotifyTotalEnabled="editQuotaNotifyTotalEnabled"
:quotaNotifyTotalThreshold="editQuotaNotifyTotalThreshold"
:quotaNotifyTotalThresholdType="editQuotaNotifyTotalThresholdType"
@update:totalLimit="editQuotaLimit = $event"
@update:dailyLimit="editQuotaDailyLimit = $event"
@update:weeklyLimit="editQuotaWeeklyLimit = $event"
@@ -1203,10 +1206,13 @@
@update:resetTimezone="editResetTimezone = $event"
@update:quotaNotifyDailyEnabled="editQuotaNotifyDailyEnabled = $event"
@update:quotaNotifyDailyThreshold="editQuotaNotifyDailyThreshold = $event"
@update:quotaNotifyDailyThresholdType="editQuotaNotifyDailyThresholdType = $event"
@update:quotaNotifyWeeklyEnabled="editQuotaNotifyWeeklyEnabled = $event"
@update:quotaNotifyWeeklyThreshold="editQuotaNotifyWeeklyThreshold = $event"
@update:quotaNotifyWeeklyThresholdType="editQuotaNotifyWeeklyThresholdType = $event"
@update:quotaNotifyTotalEnabled="editQuotaNotifyTotalEnabled = $event"
@update:quotaNotifyTotalThreshold="editQuotaNotifyTotalThreshold = $event"
@update:quotaNotifyTotalThresholdType="editQuotaNotifyTotalThresholdType = $event"
/>
</div>
<!-- 配额控制 (非 Anthropic apikey/bedrock) -->
@@ -1232,10 +1238,13 @@
:resetTimezone="editResetTimezone"
:quotaNotifyDailyEnabled="editQuotaNotifyDailyEnabled"
:quotaNotifyDailyThreshold="editQuotaNotifyDailyThreshold"
:quotaNotifyDailyThresholdType="editQuotaNotifyDailyThresholdType"
:quotaNotifyWeeklyEnabled="editQuotaNotifyWeeklyEnabled"
:quotaNotifyWeeklyThreshold="editQuotaNotifyWeeklyThreshold"
:quotaNotifyWeeklyThresholdType="editQuotaNotifyWeeklyThresholdType"
:quotaNotifyTotalEnabled="editQuotaNotifyTotalEnabled"
:quotaNotifyTotalThreshold="editQuotaNotifyTotalThreshold"
:quotaNotifyTotalThresholdType="editQuotaNotifyTotalThresholdType"
@update:totalLimit="editQuotaLimit = $event"
@update:dailyLimit="editQuotaDailyLimit = $event"
@update:weeklyLimit="editQuotaWeeklyLimit = $event"
@@ -1247,10 +1256,13 @@
@update:resetTimezone="editResetTimezone = $event"
@update:quotaNotifyDailyEnabled="editQuotaNotifyDailyEnabled = $event"
@update:quotaNotifyDailyThreshold="editQuotaNotifyDailyThreshold = $event"
@update:quotaNotifyDailyThresholdType="editQuotaNotifyDailyThresholdType = $event"
@update:quotaNotifyWeeklyEnabled="editQuotaNotifyWeeklyEnabled = $event"
@update:quotaNotifyWeeklyThreshold="editQuotaNotifyWeeklyThreshold = $event"
@update:quotaNotifyWeeklyThresholdType="editQuotaNotifyWeeklyThresholdType = $event"
@update:quotaNotifyTotalEnabled="editQuotaNotifyTotalEnabled = $event"
@update:quotaNotifyTotalThreshold="editQuotaNotifyTotalThreshold = $event"
@update:quotaNotifyTotalThresholdType="editQuotaNotifyTotalThresholdType = $event"
/>
</div>
@@ -1992,10 +2004,13 @@ const editWeeklyResetHour = ref<number | null>(null)
const editResetTimezone = ref<string | null>(null)
const editQuotaNotifyDailyEnabled = ref<boolean | null>(null)
const editQuotaNotifyDailyThreshold = ref<number | null>(null)
const editQuotaNotifyDailyThresholdType = ref<string | null>(null)
const editQuotaNotifyWeeklyEnabled = ref<boolean | null>(null)
const editQuotaNotifyWeeklyThreshold = ref<number | null>(null)
const editQuotaNotifyWeeklyThresholdType = ref<string | null>(null)
const editQuotaNotifyTotalEnabled = ref<boolean | null>(null)
const editQuotaNotifyTotalThreshold = ref<number | null>(null)
const editQuotaNotifyTotalThresholdType = ref<string | null>(null)
const openAIWSModeOptions = computed(() => [
{ value: OPENAI_WS_MODE_OFF, label: t('admin.accounts.openai.wsModeOff') },
// TODO: ctx_pool 选项暂时隐藏，待测试完成后恢复
@@ -2198,10 +2213,13 @@ const syncFormFromAccount = (newAccount: Account | null) => {
// Load quota notify config
editQuotaNotifyDailyEnabled.value = (extra?.quota_notify_daily_enabled as boolean) ?? null
editQuotaNotifyDailyThreshold.value = (extra?.quota_notify_daily_threshold as number) ?? null
editQuotaNotifyDailyThresholdType.value = (extra?.quota_notify_daily_threshold_type as string) ?? null
editQuotaNotifyWeeklyEnabled.value = (extra?.quota_notify_weekly_enabled as boolean) ?? null
editQuotaNotifyWeeklyThreshold.value = (extra?.quota_notify_weekly_threshold as number) ?? null
editQuotaNotifyWeeklyThresholdType.value = (extra?.quota_notify_weekly_threshold_type as string) ?? null
editQuotaNotifyTotalEnabled.value = (extra?.quota_notify_total_enabled as boolean) ?? null
editQuotaNotifyTotalThreshold.value = (extra?.quota_notify_total_threshold as number) ?? null
editQuotaNotifyTotalThresholdType.value = (extra?.quota_notify_total_threshold_type as string) ?? null
} else {
editQuotaLimit.value = null
editQuotaDailyLimit.value = null
@@ -3262,9 +3280,11 @@ const handleSubmit = async () => {
} else {
delete newExtra.quota_notify_daily_threshold
}
newExtra.quota_notify_daily_threshold_type = editQuotaNotifyDailyThresholdType.value || 'fixed'
} else {
delete newExtra.quota_notify_daily_enabled
delete newExtra.quota_notify_daily_threshold
delete newExtra.quota_notify_daily_threshold_type
}
if (editQuotaNotifyWeeklyEnabled.value) {
newExtra.quota_notify_weekly_enabled = true
@@ -3273,9 +3293,11 @@ const handleSubmit = async () => {
} else {
delete newExtra.quota_notify_weekly_threshold
}
newExtra.quota_notify_weekly_threshold_type = editQuotaNotifyWeeklyThresholdType.value || 'fixed'
} else {
delete newExtra.quota_notify_weekly_enabled
delete newExtra.quota_notify_weekly_threshold
delete newExtra.quota_notify_weekly_threshold_type
}
if (editQuotaNotifyTotalEnabled.value) {
newExtra.quota_notify_total_enabled = true
@@ -3284,9 +3306,11 @@ const handleSubmit = async () => {
} else {
delete newExtra.quota_notify_total_threshold
}
newExtra.quota_notify_total_threshold_type = editQuotaNotifyTotalThresholdType.value || 'fixed'
} else {
delete newExtra.quota_notify_total_enabled
delete newExtra.quota_notify_total_threshold
delete newExtra.quota_notify_total_threshold_type
}
updatePayload.extra = newExtra
}

15
frontend/src/components/account/QuotaLimitCard.vue
View File

@@ -17,17 +17,23 @@ const props = withDefaults(defineProps<{
resetTimezone: string | null
quotaNotifyDailyEnabled?: boolean | null
quotaNotifyDailyThreshold?: number | null
quotaNotifyDailyThresholdType?: string | null
quotaNotifyWeeklyEnabled?: boolean | null
quotaNotifyWeeklyThreshold?: number | null
quotaNotifyWeeklyThresholdType?: string | null
quotaNotifyTotalEnabled?: boolean | null
quotaNotifyTotalThreshold?: number | null
quotaNotifyTotalThresholdType?: string | null
}>(), {
quotaNotifyDailyEnabled: null,
quotaNotifyDailyThreshold: null,
quotaNotifyDailyThresholdType: null,
quotaNotifyWeeklyEnabled: null,
quotaNotifyWeeklyThreshold: null,
quotaNotifyWeeklyThresholdType: null,
quotaNotifyTotalEnabled: null,
quotaNotifyTotalThreshold: null,
quotaNotifyTotalThresholdType: null,
})
const emit = defineEmits<{
@@ -42,10 +48,13 @@ const emit = defineEmits<{
'update:resetTimezone': [value: string | null]
'update:quotaNotifyDailyEnabled': [value: boolean | null]
'update:quotaNotifyDailyThreshold': [value: number | null]
'update:quotaNotifyDailyThresholdType': [value: string | null]
'update:quotaNotifyWeeklyEnabled': [value: boolean | null]
'update:quotaNotifyWeeklyThreshold': [value: number | null]
'update:quotaNotifyWeeklyThresholdType': [value: string | null]
'update:quotaNotifyTotalEnabled': [value: boolean | null]
'update:quotaNotifyTotalThreshold': [value: number | null]
'update:quotaNotifyTotalThresholdType': [value: string | null]
}>()
const enabled = computed(() =>
@@ -228,8 +237,10 @@ const onWeeklyModeChange = (e: Event) => {
v-if="dailyLimit && dailyLimit > 0"
:enabled="props.quotaNotifyDailyEnabled"
:threshold="props.quotaNotifyDailyThreshold"
:threshold-type="props.quotaNotifyDailyThresholdType"
@update:enabled="emit('update:quotaNotifyDailyEnabled', $event)"
@update:threshold="emit('update:quotaNotifyDailyThreshold', $event)"
@update:threshold-type="emit('update:quotaNotifyDailyThresholdType', $event)"
/>
</div>
@@ -292,8 +303,10 @@ const onWeeklyModeChange = (e: Event) => {
v-if="weeklyLimit && weeklyLimit > 0"
:enabled="props.quotaNotifyWeeklyEnabled"
:threshold="props.quotaNotifyWeeklyThreshold"
:threshold-type="props.quotaNotifyWeeklyThresholdType"
@update:enabled="emit('update:quotaNotifyWeeklyEnabled', $event)"
@update:threshold="emit('update:quotaNotifyWeeklyThreshold', $event)"
@update:threshold-type="emit('update:quotaNotifyWeeklyThresholdType', $event)"
/>
</div>
@@ -330,8 +343,10 @@ const onWeeklyModeChange = (e: Event) => {
v-if="totalLimit && totalLimit > 0"
:enabled="props.quotaNotifyTotalEnabled"
:threshold="props.quotaNotifyTotalThreshold"
:threshold-type="props.quotaNotifyTotalThresholdType"
@update:enabled="emit('update:quotaNotifyTotalEnabled', $event)"
@update:threshold="emit('update:quotaNotifyTotalThreshold', $event)"
@update:threshold-type="emit('update:quotaNotifyTotalThresholdType', $event)"
/>
</div>
</div>

31
frontend/src/components/account/QuotaNotifyToggle.vue
View File

@@ -6,12 +6,18 @@ const { t } = useI18n()
defineProps<{
enabled: boolean | null
threshold: number | null
thresholdType: string | null // "fixed" (default) or "percentage"
}>()
const emit = defineEmits<{
'update:enabled': [value: boolean | null]
'update:threshold': [value: number | null]
'update:thresholdType': [value: string | null]
}>()
function toggleType(current: string | null) {
emit('update:thresholdType', current === 'percentage' ? 'fixed' : 'percentage')
}
</script>
<template>
@@ -32,15 +38,32 @@ const emit = defineEmits<{
]"
/>
</button>
<div v-if="enabled" class="relative flex-1">
<span class="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 text-sm">$</span>
<div v-if="enabled" class="flex items-center gap-1 flex-1">
<button
type="button"
class="px-1.5 py-0.5 text-xs font-medium rounded border transition-colors"
:class="(!thresholdType || thresholdType === 'fixed') ? 'bg-primary-100 text-primary-700 border-primary-300 dark:bg-primary-900/30 dark:text-primary-400 dark:border-primary-700' : 'bg-gray-100 text-gray-500 border-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:border-dark-500'"
@click="toggleType(thresholdType)"
>
$
</button>
<button
type="button"
class="px-1.5 py-0.5 text-xs font-medium rounded border transition-colors"
:class="thresholdType === 'percentage' ? 'bg-primary-100 text-primary-700 border-primary-300 dark:bg-primary-900/30 dark:text-primary-400 dark:border-primary-700' : 'bg-gray-100 text-gray-500 border-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:border-dark-500'"
@click="toggleType(thresholdType)"
>
%
</button>
<input
:value="threshold"
@input="emit('update:threshold', parseFloat(($event.target as HTMLInputElement).value) || null)"
type="number"
min="0"
step="0.01"
class="input pl-6 py-1 text-sm"
:max="thresholdType === 'percentage' ? 100 : undefined"
:step="thresholdType === 'percentage' ? 1 : 0.01"
class="input py-1 text-sm flex-1"
:placeholder="thresholdType === 'percentage' ? t('admin.accounts.quotaNotify.thresholdPlaceholder') : t('admin.accounts.quotaNotify.threshold')"
/>
</div>
</div>

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

@@ -2257,7 +2257,7 @@ export default {
alert: 'Alert Threshold',
enabled: 'Enable Alert',
threshold: 'Alert Amount',
thresholdPlaceholder: 'Enter alert amount',
thresholdPlaceholder: 'Enter percentage',
},
testConnection: 'Test Connection',
reAuthorize: 'Re-Authorize',
@@ -4640,6 +4640,7 @@ export default {
quotaNotify: {
title: 'Account Quota Notification',
description: 'Notify admins when account quota usage reaches alert threshold',
enabled: 'Enable Account Quota Notification',
emails: 'Notification Emails',
emailsHint: 'Leave empty to disable notifications',
addEmail: 'Add Email',

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

@@ -2255,7 +2255,7 @@ export default {
alert: '告警阈值',
enabled: '启用告警',
threshold: '告警金额',
thresholdPlaceholder: '输入告警金额',
thresholdPlaceholder: '输入百分比',
},
testConnection: '测试连接',
reAuthorize: '重新授权',
@@ -4804,6 +4804,7 @@ export default {
quotaNotify: {
title: '账号限额通知',
description: '当账号配额用量达到告警阈值时通知管理员',
enabled: '启用账号限额通知',
emails: '通知邮箱',
emailsHint: '留空则不发送通知',
addEmail: '添加邮箱',

4
frontend/src/stores/app.ts
View File

@@ -339,7 +339,9 @@ export const useAppStore = defineStore('app', () => {
oidc_oauth_enabled: false,
oidc_oauth_provider_name: 'OIDC',
backend_mode_enabled: false,
version: siteVersion.value
version: siteVersion.value,
balance_low_notify_enabled: false,
account_quota_notify_enabled: false,
}
}

2
frontend/src/types/index.ts
View File

@@ -117,6 +117,8 @@ export interface PublicSettings {
oidc_oauth_provider_name: string
backend_mode_enabled: boolean
version: string
balance_low_notify_enabled: boolean
account_quota_notify_enabled: boolean
}
export interface AuthResponse {

10
frontend/src/views/admin/SettingsView.vue
View File

@@ -2718,11 +2718,15 @@
</p>
</div>
<div class="px-6 py-6 space-y-4">
<div>
<div class="flex items-center justify-between">
<label class="mb-0 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.settings.quotaNotify.enabled') }}</label>
<Toggle v-model="form.account_quota_notify_enabled" />
</div>
<div v-if="form.account_quota_notify_enabled">
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.settings.quotaNotify.emails') }}</label>
<div class="space-y-2">
<div v-for="(_, index) in (form.account_quota_notify_emails || [])" :key="index" class="flex items-center gap-2">
<input v-model="form.account_quota_notify_emails[index]" type="email" class="input flex-1" />
<input v-model="form.account_quota_notify_emails[index]" type="email" class="input flex-1" :placeholder="t('admin.settings.quotaNotify.emailPlaceholder')" />
<button @click="form.account_quota_notify_emails.splice(index, 1)" class="btn btn-secondary px-2" type="button">
<Icon name="x" size="xs" class="h-4 w-4" />
</button>
@@ -3018,6 +3022,7 @@ const form = reactive<SettingsForm>({
// Balance & quota notification
balance_low_notify_enabled: false,
balance_low_notify_threshold: 0,
account_quota_notify_enabled: false,
account_quota_notify_emails: [] as string[]
})
@@ -3588,6 +3593,7 @@ async function saveSettings() {
// Balance & quota notification
balance_low_notify_enabled: form.balance_low_notify_enabled,
balance_low_notify_threshold: Number(form.balance_low_notify_threshold) || 0,
account_quota_notify_enabled: form.account_quota_notify_enabled,
account_quota_notify_emails: (form.account_quota_notify_emails || []).filter((e: string) => e.trim() !== ''),
}

5
frontend/src/views/user/ProfileView.vue
View File

@@ -15,7 +15,7 @@
</div>
<ProfileEditForm :initial-username="user?.username || ''" />
<ProfileBalanceNotifyCard
v-if="user"
v-if="user && balanceLowNotifyEnabled"
:enabled="user.balance_notify_enabled ?? true"
:threshold="user.balance_notify_threshold"
:extra-emails="user.balance_notify_extra_emails ?? []"
@@ -40,11 +40,12 @@ import { Icon } from '@/components/icons'
const { t } = useI18n(); const authStore = useAuthStore(); const user = computed(() => authStore.user)
const contactInfo = ref('')
const balanceLowNotifyEnabled = ref(false)
const WalletIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12' })]) }
const BoltIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })]) }
const CalendarIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'M6.75 3v2.25M17.25 3v2.25' })]) }
onMounted(async () => { try { const s = await authAPI.getPublicSettings(); contactInfo.value = s.contact_info || '' } catch (error) { console.error('Failed to load contact info:', error) } })
onMounted(async () => { try { const s = await authAPI.getPublicSettings(); contactInfo.value = s.contact_info || ''; balanceLowNotifyEnabled.value = s.balance_low_notify_enabled ?? false } catch (error) { console.error('Failed to load contact info:', error) } })
const formatCurrency = (v: number) => `$${v.toFixed(2)}`
</script>