调整和平小店抢购控制布局

This commit is contained in:
yml2213
2026-08-08 19:00:59 +08:00
parent 68bdd6b42c
commit 9c5fe39d76
@@ -139,61 +139,68 @@ onUnmounted(() => {
<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="queryAssets">{{ isXiaodian ? '查询点券/碎片' : '查询积分' }}</button>
<template v-if="isXiaodian">
<button class="btn btn-fixed" @click="startFixedBuy">固定抢购</button>
<button class="btn btn-watch" :class="{ watching: keywordWatching }" @click="toggleKeywordWatch">
{{ keywordWatching ? '停止监控' : '启动关键词监控' }}
<div class="action-row">
<div class="action-group">
<button class="btn btn-danger" @click="startNow">立即抢购</button>
<button
v-if="!scheduleActive"
class="btn btn-success"
@click="handleSchedule"
>
开启定时
</button>
</template>
<button
v-else
class="btn btn-cancel"
@click="cancelSchedule"
>
停止定时
</button>
<button class="btn" @click="reloadAccounts">加载账号</button>
<button class="btn" @click="queryAssets">{{ isXiaodian ? '查询点券/碎片' : '查询积分' }}</button>
<button v-if="isXiaodian" class="btn btn-fixed" @click="startFixedBuy">固定抢购</button>
</div>
<div class="schedule-item target-item">
<label>目标</label>
<input v-model="targetTime" type="time" step="1">
</div>
</div>
<div class="schedule-bar">
<template v-if="isXiaodian">
<div class="xiaodian-settings">
<span class="settings-title">监控设置</span>
<div class="schedule-item">
<label>启动</label>
<input v-model="watchStartTime" type="time" step="1" @change="saveFixedConfig">
</div>
<div class="schedule-item">
<label>刷新</label>
<input v-model.number="watchIntervalSec" type="number" min="1" max="600" step="1" @change="saveFixedConfig">
<span class="input-unit">秒</span>
</div>
<span class="settings-title buy-title">商品抢购设置</span>
<div class="schedule-item fixed-keyword">
<label>关键词</label>
<input v-model="fixedKeyword" type="text" placeholder="例如:礼包" @change="saveFixedConfig">
</div>
<div class="schedule-item">
<label>次数</label>
<input v-model.number="fixedAttempts" type="number" min="1" max="100000" step="1" @change="saveFixedConfig">
</div>
<div class="schedule-item">
<label>间隔</label>
<input v-model.number="fixedDelayMs" type="number" min="0" max="60000" step="50" @change="saveFixedConfig">
<span class="input-unit">ms</span>
</div>
<div v-if="isXiaodian" class="keyword-row">
<span class="settings-title keyword-title">关键词抢购</span>
<div class="xiaodian-settings">
<span class="settings-title">监控</span>
<div class="schedule-item">
<label>启动</label>
<input v-model="watchStartTime" type="time" step="1" @change="saveFixedConfig">
</div>
</template>
<div class="schedule-item">
<label>刷新</label>
<input v-model.number="watchIntervalSec" type="number" min="1" max="600" step="1" @change="saveFixedConfig">
<span class="input-unit">秒</span>
</div>
<span class="settings-title buy-title">抢购</span>
<div class="schedule-item fixed-keyword">
<label>关键词</label>
<input v-model="fixedKeyword" type="text" placeholder="例如:礼包" @change="saveFixedConfig">
</div>
<div class="schedule-item">
<label>次数</label>
<input v-model.number="fixedAttempts" type="number" min="1" max="100000" step="1" @change="saveFixedConfig">
</div>
<div class="schedule-item">
<label>间隔</label>
<input v-model.number="fixedDelayMs" type="number" min="0" max="60000" step="50" @change="saveFixedConfig">
<span class="input-unit">ms</span>
</div>
<button class="btn btn-watch" :class="{ watching: keywordWatching }" @click="toggleKeywordWatch">
{{ keywordWatching ? '停止监控' : '启动监控' }}
</button>
</div>
</div>
<!-- 非和平小店仅显示目标时间,保持原有定时布局。 -->
<div v-else class="schedule-bar">
<div class="schedule-item">
<label>目标</label>
<input
@@ -225,6 +232,30 @@ onUnmounted(() => {
flex-wrap: wrap;
}
.action-row,
.keyword-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
}
.keyword-row {
justify-content: flex-start;
padding-top: 2px;
}
.target-item {
flex: 0 0 auto;
}
.keyword-title {
flex: 0 0 auto;
color: var(--text-strong);
font-size: 12px;
}
.schedule-bar {
display: flex;
gap: 8px;
@@ -238,13 +269,13 @@ onUnmounted(() => {
gap: 6px;
}
.schedule-bar label {
.schedule-item label {
color: var(--muted);
font-size: 12px;
white-space: nowrap;
}
.schedule-bar input {
.schedule-item input {
height: 30px;
padding: 0 10px;
background: var(--field);
@@ -256,18 +287,18 @@ onUnmounted(() => {
transition: .15s;
}
.schedule-bar input:focus {
.schedule-item input:focus {
outline: 0;
border-color: var(--accent);
box-shadow: var(--focus);
}
.schedule-bar input[type="time"] {
.schedule-item input[type="time"] {
width: 108px;
text-align: center;
}
.schedule-bar input[type="number"] {
.schedule-item input[type="number"] {
width: 72px;
text-align: center;
}
@@ -297,8 +328,16 @@ onUnmounted(() => {
align-items: stretch;
}
.schedule-bar {
.schedule-bar,
.action-row,
.keyword-row {
justify-content: flex-end;
}
.action-row,
.keyword-row {
align-items: flex-start;
flex-direction: column;
}
}
</style>