43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
|
<script setup>
|
|||
|
|
// 自动刷新间隔选择：0=不自动刷新（仅手动），其余为秒数。父组件负责持久化与定时器。
|
|||
|
|
import { useI18n } from 'vue-i18n'
|
|||
|
|
import { Timer } from 'lucide-vue-next'
|
|||
|
|
|
|||
|
|
defineProps({ modelValue: { type: Number, default: 30 } })
|
|||
|
|
const emit = defineEmits(['update:modelValue'])
|
|||
|
|
const { t } = useI18n()
|
|||
|
|
const OPTIONS = [0, 5, 10, 30, 60, 120]
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<label class="refresh-pick" :title="t('autoRefreshEvery')">
|
|||
|
|
<Timer />
|
|||
|
|
<select :value="modelValue" @change="emit('update:modelValue', Number($event.target.value))">
|
|||
|
|
<option v-for="o in OPTIONS" :key="o" :value="o">{{ o === 0 ? t('refreshManualOnly') : t('refreshEveryN', { n: o }) }}</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.refresh-pick {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: .35rem;
|
|||
|
|
padding: 0 .55rem;
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background: var(--panel, transparent);
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
.refresh-pick svg { width: 15px; height: 15px; }
|
|||
|
|
.refresh-pick select {
|
|||
|
|
border: 0;
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--text);
|
|||
|
|
font-size: .85rem;
|
|||
|
|
padding: .45rem 0;
|
|||
|
|
outline: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
</style>
|