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

style(frontend): 统一 Views 模块代码风格

Browse Source 
- 移除语句末尾分号，规范代码格式
- 优化组件结构和类型定义
- 改进视图文档和示例
- 提升代码一致性
This commit is contained in:
ianshaw
2025-12-25 08:41:36 -08:00
parent f79b0f0fad
commit 5763f5ced3
25 changed files with 5374 additions and 2439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,17 +3,31 @@
<div class="space-y-6">
<!-- Loading State -->
<div v-if="loading" class="flex justify-center py-12">
<div class="animate-spin rounded-full h-8 w-8 border-2 border-primary-500 border-t-transparent"></div>
<div
class="h-8 w-8 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"
></div>
</div>
<!-- Empty State -->
<div v-else-if="subscriptions.length === 0" class="card p-12 text-center">
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-dark-700 flex items-center justify-center">
<svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
<div
class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700"
>
<svg
class="h-8 w-8 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
/>
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
<h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
{{ t('userSubscriptions.noActiveSubscriptions') }}
</h3>
<p class="text-gray-500 dark:text-dark-400">
@@ -29,11 +43,25 @@
class="card overflow-hidden"
>
<!-- Header -->
<div class="flex items-center justify-between p-4 border-b border-gray-100 dark:border-dark-700">
<div
class="flex items-center justify-between border-b border-gray-100 p-4 dark:border-dark-700"
>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
<div
class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-100 dark:bg-purple-900/30"
>
<svg
class="h-5 w-5 text-purple-600 dark:text-purple-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
/>
</svg>
</div>
<div>
@@ -48,8 +76,11 @@
<span
:class="[
'badge',
subscription.status === 'active' ? 'badge-success' :
subscription.status === 'expired' ? 'badge-warning' : 'badge-danger'
subscription.status === 'active'
? 'badge-success'
: subscription.status === 'expired'
? 'badge-warning'
: 'badge-danger'
]"
>
{{ t(`userSubscriptions.status.${subscription.status}`) }}
@@ -57,17 +88,23 @@
</div>
<!-- Usage Progress -->
<div class="p-4 space-y-4">
<div class="space-y-4 p-4">
<!-- Expiration Info -->
<div v-if="subscription.expires_at" class="flex items-center justify-between text-sm">
<span class="text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.expires') }}</span>
<span class="text-gray-500 dark:text-dark-400">{{
t('userSubscriptions.expires')
}}</span>
<span :class="getExpirationClass(subscription.expires_at)">
{{ formatExpirationDate(subscription.expires_at) }}
</span>
</div>
<div v-else class="flex items-center justify-between text-sm">
<span class="text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.expires') }}</span>
<span class="text-gray-700 dark:text-gray-300">{{ t('userSubscriptions.noExpiration') }}</span>
<span class="text-gray-500 dark:text-dark-400">{{
t('userSubscriptions.expires')
}}</span>
<span class="text-gray-700 dark:text-gray-300">{{
t('userSubscriptions.noExpiration')
}}</span>
</div>
<!-- Daily Usage -->
@@ -77,18 +114,37 @@
{{ t('userSubscriptions.daily') }}
</span>
<span class="text-sm text-gray-500 dark:text-dark-400">
${{ (subscription.daily_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.daily_limit_usd.toFixed(2) }}
${{ (subscription.daily_usage_usd || 0).toFixed(2) }} / ${{
subscription.group.daily_limit_usd.toFixed(2)
}}
</span>
</div>
<div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
<div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
:class="getProgressBarClass(subscription.daily_usage_usd, subscription.group.daily_limit_usd)"
:style="{ width: getProgressWidth(subscription.daily_usage_usd, subscription.group.daily_limit_usd) }"
:class="
getProgressBarClass(
subscription.daily_usage_usd,
subscription.group.daily_limit_usd
)
"
:style="{
width: getProgressWidth(
subscription.daily_usage_usd,
subscription.group.daily_limit_usd
)
}"
></div>
</div>
<p v-if="subscription.daily_window_start" class="text-xs text-gray-500 dark:text-dark-400">
{{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.daily_window_start, 24) }) }}
<p
v-if="subscription.daily_window_start"
class="text-xs text-gray-500 dark:text-dark-400"
>
{{
t('userSubscriptions.resetIn', {
time: formatResetTime(subscription.daily_window_start, 24)
})
}}
</p>
</div>
@@ -99,18 +155,37 @@
{{ t('userSubscriptions.weekly') }}
</span>
<span class="text-sm text-gray-500 dark:text-dark-400">
${{ (subscription.weekly_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.weekly_limit_usd.toFixed(2) }}
${{ (subscription.weekly_usage_usd || 0).toFixed(2) }} / ${{
subscription.group.weekly_limit_usd.toFixed(2)
}}
</span>
</div>
<div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
<div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
:class="getProgressBarClass(subscription.weekly_usage_usd, subscription.group.weekly_limit_usd)"
:style="{ width: getProgressWidth(subscription.weekly_usage_usd, subscription.group.weekly_limit_usd) }"
:class="
getProgressBarClass(
subscription.weekly_usage_usd,
subscription.group.weekly_limit_usd
)
"
:style="{
width: getProgressWidth(
subscription.weekly_usage_usd,
subscription.group.weekly_limit_usd
)
}"
></div>
</div>
<p v-if="subscription.weekly_window_start" class="text-xs text-gray-500 dark:text-dark-400">
{{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.weekly_window_start, 168) }) }}
<p
v-if="subscription.weekly_window_start"
class="text-xs text-gray-500 dark:text-dark-400"
>
{{
t('userSubscriptions.resetIn', {
time: formatResetTime(subscription.weekly_window_start, 168)
})
}}
</p>
</div>
@@ -121,27 +196,52 @@
{{ t('userSubscriptions.monthly') }}
</span>
<span class="text-sm text-gray-500 dark:text-dark-400">
${{ (subscription.monthly_usage_usd || 0).toFixed(2) }} / ${{ subscription.group.monthly_limit_usd.toFixed(2) }}
${{ (subscription.monthly_usage_usd || 0).toFixed(2) }} / ${{
subscription.group.monthly_limit_usd.toFixed(2)
}}
</span>
</div>
<div class="relative h-2 bg-gray-200 dark:bg-dark-600 rounded-full overflow-hidden">
<div class="relative h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-dark-600">
<div
class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
:class="getProgressBarClass(subscription.monthly_usage_usd, subscription.group.monthly_limit_usd)"
:style="{ width: getProgressWidth(subscription.monthly_usage_usd, subscription.group.monthly_limit_usd) }"
:class="
getProgressBarClass(
subscription.monthly_usage_usd,
subscription.group.monthly_limit_usd
)
"
:style="{
width: getProgressWidth(
subscription.monthly_usage_usd,
subscription.group.monthly_limit_usd
)
}"
></div>
</div>
<p v-if="subscription.monthly_window_start" class="text-xs text-gray-500 dark:text-dark-400">
{{ t('userSubscriptions.resetIn', { time: formatResetTime(subscription.monthly_window_start, 720) }) }}
<p
v-if="subscription.monthly_window_start"
class="text-xs text-gray-500 dark:text-dark-400"
>
{{
t('userSubscriptions.resetIn', {
time: formatResetTime(subscription.monthly_window_start, 720)
})
}}
</p>
</div>
<!-- No limits configured -->
<div
v-if="!subscription.group?.daily_limit_usd && !subscription.group?.weekly_limit_usd && !subscription.group?.monthly_limit_usd"
class="text-center py-4"
v-if="
!subscription.group?.daily_limit_usd &&
!subscription.group?.weekly_limit_usd &&
!subscription.group?.monthly_limit_usd
"
class="py-4 text-center"
>
<span class="text-sm text-gray-500 dark:text-dark-400">{{ t('userSubscriptions.unlimited') }}</span>
<span class="text-sm text-gray-500 dark:text-dark-400">{{
t('userSubscriptions.unlimited')
}}</span>
</div>
</div>
</div>
@@ -151,110 +251,110 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useAppStore } from '@/stores/app';
import subscriptionsAPI from '@/api/subscriptions';
import type { UserSubscription } from '@/types';
import AppLayout from '@/components/layout/AppLayout.vue';
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/app'
import subscriptionsAPI from '@/api/subscriptions'
import type { UserSubscription } from '@/types'
import AppLayout from '@/components/layout/AppLayout.vue'
const { t } = useI18n();
const appStore = useAppStore();
const { t } = useI18n()
const appStore = useAppStore()
const subscriptions = ref<UserSubscription[]>([]);
const loading = ref(true);
const subscriptions = ref<UserSubscription[]>([])
const loading = ref(true)
async function loadSubscriptions() {
try {
loading.value = true;
subscriptions.value = await subscriptionsAPI.getMySubscriptions();
loading.value = true
subscriptions.value = await subscriptionsAPI.getMySubscriptions()
} catch (error) {
console.error('Failed to load subscriptions:', error);
appStore.showError('Failed to load subscriptions');
console.error('Failed to load subscriptions:', error)
appStore.showError('Failed to load subscriptions')
} finally {
loading.value = false;
loading.value = false
}
}
function getProgressWidth(used: number | undefined, limit: number | null | undefined): string {
if (!limit || limit === 0) return '0%';
const percentage = Math.min(((used || 0) / limit) * 100, 100);
return `${percentage}%`;
if (!limit || limit === 0) return '0%'
const percentage = Math.min(((used || 0) / limit) * 100, 100)
return `${percentage}%`
}
function getProgressBarClass(used: number | undefined, limit: number | null | undefined): string {
if (!limit || limit === 0) return 'bg-gray-400';
const percentage = ((used || 0) / limit) * 100;
if (percentage >= 90) return 'bg-red-500';
if (percentage >= 70) return 'bg-orange-500';
return 'bg-green-500';
if (!limit || limit === 0) return 'bg-gray-400'
const percentage = ((used || 0) / limit) * 100
if (percentage >= 90) return 'bg-red-500'
if (percentage >= 70) return 'bg-orange-500'
return 'bg-green-500'
}
function formatExpirationDate(expiresAt: string): string {
const now = new Date();
const expires = new Date(expiresAt);
const diff = expires.getTime() - now.getTime();
const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
const now = new Date()
const expires = new Date(expiresAt)
const diff = expires.getTime() - now.getTime()
const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
if (days < 0) {
return t('userSubscriptions.status.expired');
return t('userSubscriptions.status.expired')
}
const dateStr = expires.toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric'
});
})
if (days === 0) {
return `${dateStr} (Today)`;
return `${dateStr} (Today)`
}
if (days === 1) {
return `${dateStr} (Tomorrow)`;
return `${dateStr} (Tomorrow)`
}
return t('userSubscriptions.daysRemaining', { days }) + ` (${dateStr})`;
return t('userSubscriptions.daysRemaining', { days }) + ` (${dateStr})`
}
function getExpirationClass(expiresAt: string): string {
const now = new Date();
const expires = new Date(expiresAt);
const diff = expires.getTime() - now.getTime();
const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
const now = new Date()
const expires = new Date(expiresAt)
const diff = expires.getTime() - now.getTime()
const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
if (days <= 0) return 'text-red-600 dark:text-red-400 font-medium';
if (days <= 3) return 'text-red-600 dark:text-red-400';
if (days <= 7) return 'text-orange-600 dark:text-orange-400';
return 'text-gray-700 dark:text-gray-300';
if (days <= 0) return 'text-red-600 dark:text-red-400 font-medium'
if (days <= 3) return 'text-red-600 dark:text-red-400'
if (days <= 7) return 'text-orange-600 dark:text-orange-400'
return 'text-gray-700 dark:text-gray-300'
}
function formatResetTime(windowStart: string | null, windowHours: number): string {
if (!windowStart) return t('userSubscriptions.windowNotActive');
if (!windowStart) return t('userSubscriptions.windowNotActive')
const start = new Date(windowStart);
const end = new Date(start.getTime() + windowHours * 60 * 60 * 1000);
const now = new Date();
const diff = end.getTime() - now.getTime();
const start = new Date(windowStart)
const end = new Date(start.getTime() + windowHours * 60 * 60 * 1000)
const now = new Date()
const diff = end.getTime() - now.getTime()
if (diff <= 0) return t('userSubscriptions.windowNotActive');
if (diff <= 0) return t('userSubscriptions.windowNotActive')
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const hours = Math.floor(diff / (1000 * 60 * 60))
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
if (hours > 24) {
const days = Math.floor(hours / 24);
const remainingHours = hours % 24;
return `${days}d ${remainingHours}h`;
const days = Math.floor(hours / 24)
const remainingHours = hours % 24
return `${days}d ${remainingHours}h`
}
if (hours > 0) {
return `${hours}h ${minutes}m`;
return `${hours}h ${minutes}m`
}
return `${minutes}m`;
return `${minutes}m`
}
onMounted(() => {
loadSubscriptions();
});
loadSubscriptions()
})
</script>