120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useAccounts } from '@/composables/useAccounts'
|
|
|
|
defineProps<{
|
|
serverTime: string
|
|
}>()
|
|
|
|
const { accounts, selectedIndices, statusMap } = useAccounts()
|
|
|
|
const messageSucceeded = (message: string) => /成功|兑换上限|已抢到/.test(message)
|
|
|
|
const stats = computed(() => {
|
|
const selectedNames = [...selectedIndices.value]
|
|
.map(i => accounts.value[i]?.name)
|
|
.filter(Boolean) as string[]
|
|
|
|
let success = 0
|
|
let fail = 0
|
|
|
|
for (const name of selectedNames) {
|
|
const st = statusMap.value[name]
|
|
const msg = st && typeof st === 'object' ? String((st as any).message || '') : ''
|
|
|
|
if (st === true || (st && typeof st === 'object' && ((st as any).ok || messageSucceeded(msg)))) {
|
|
success++
|
|
} else if (st === false || (st && typeof st === 'object' && !(st as any).pending && msg)) {
|
|
fail++
|
|
}
|
|
}
|
|
|
|
return {
|
|
selected: selectedNames.length,
|
|
total: accounts.value.length,
|
|
success,
|
|
fail,
|
|
pending: Math.max(0, selectedNames.length - success - fail)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="status-grid">
|
|
<div class="metric">
|
|
<span class="metric-label">服务器</span>
|
|
<span class="metric-value server">{{ serverTime }}</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">账号</span>
|
|
<span class="metric-value">
|
|
<span>{{ stats.selected }}</span>/<span>{{ stats.total }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">成功</span>
|
|
<span class="metric-value success-num">{{ stats.success }}</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">异常</span>
|
|
<span class="metric-value fail-num">{{ stats.fail }}</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">待处理</span>
|
|
<span class="metric-value">{{ stats.pending }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-grid {
|
|
display: flex;
|
|
gap: 24px;
|
|
padding: 12px 20px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--line);
|
|
align-items: center;
|
|
}
|
|
|
|
.metric {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.metric-value {
|
|
color: var(--text-strong);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.metric-value.server {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.metric-value.success-num {
|
|
color: var(--success);
|
|
}
|
|
|
|
.metric-value.fail-num {
|
|
color: var(--danger);
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.status-grid {
|
|
flex-wrap: wrap;
|
|
gap: 14px 24px;
|
|
}
|
|
}
|
|
</style>
|