优化前端

2026-06-26 10:56:25 +08:00
parent 88a386b588
commit 54b5bd90ae
39 changed files with 6796 additions and 216 deletions
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useScheduler } from '@/composables/useScheduler'
+import { useAccounts } from '@/composables/useAccounts'
+
+const { scheduleActive, startNow, startSchedule, cancelSchedule, restoreSchedule } = useScheduler()
+const { reloadAccounts, queryAllScore } = useAccounts()
+
+// 从本地缓存恢复定时设置
+const { savedTime, savedAdv } = restoreSchedule()
+const targetTime = ref(savedTime || '18:00:00')
+const advance = ref(savedAdv)
+
+const handleSchedule = () => {
+  startSchedule(targetTime.value, advance.value)
+}
+</script>
+
+<template>
+  <div class="control-strip">
+    <div class="action-group">
+      <button class="btn btn-danger" @click="startNow">立即抢购</button>
+      <button
+        v-if="!scheduleActive"
+        class="btn btn-success"
+        @click="handleSchedule"
+      >
+        开启定时
+      </button>
+      <button
+        v-else
+        class="btn btn-cancel"
+        @click="cancelSchedule"
+      >
+        停止定时
+      </button>
+      <button class="btn" @click="reloadAccounts">加载账号</button>
+      <button class="btn" @click="queryAllScore">查询积分</button>
+    </div>
+
+    <div class="schedule-bar">
+      <div class="schedule-item">
+        <label>目标</label>
+        <input
+          v-model="targetTime"
+          type="time"
+          step="1"
+        >
+      </div>
+      <div class="schedule-item">
+        <label>提前</label>
+        <input
+          v-model.number="advance"
+          type="number"
+          min="0"
+          max="5000"
+          step="100"
+        >
+        <span style="color: var(--muted); font-size: 11.5px">ms</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.control-strip {
+  padding: 12px 20px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.action-group {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.schedule-bar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.schedule-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.schedule-bar label {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.schedule-bar input {
+  height: 30px;
+  padding: 0 10px;
+  background: var(--field);
+  color: var(--text-strong);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+  transition: .15s;
+}
+
+.schedule-bar input:focus {
+  outline: 0;
+  border-color: var(--accent);
+  box-shadow: var(--focus);
+}
+
+.schedule-bar input[type="time"] {
+  width: 108px;
+  text-align: center;
+}
+
+.schedule-bar input[type="number"] {
+  width: 72px;
+  text-align: center;
+}
+
+@media (max-width: 1180px) {
+  .control-strip {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .schedule-bar {
+    justify-content: flex-end;
+  }
+}
+</style>
@@ -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>