优化前端

2026-06-26 10:56:25 +08:00
parent 88a386b588
commit 54b5bd90ae
39 changed files with 6796 additions and 216 deletions
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAccounts } from '@/composables/useAccounts'
+
+defineProps<{
+  serverTime: string
+}>()
+
+const { accounts, selectedIndices, statusMap } = useAccounts()
+
+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]
+    if (st === true || (st && typeof st === 'object' && (st as any).ok)) {
+      success++
+    } else if (st === false || (st && typeof st === 'object' && (st as any).message)) {
+      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>