优化前端

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>