156 lines
3.1 KiB
Vue
156 lines
3.1 KiB
Vue
<template>
|
|
<div class="maintenance-row">
|
|
<div class="maintenance-left">
|
|
<span class="maintenance-label">站点维护模式</span>
|
|
<button
|
|
:class="['maintenance-toggle', enabled ? 'toggle-on' : 'toggle-off']"
|
|
type="button"
|
|
@click="$emit('update:enabled', !enabled)"
|
|
>
|
|
{{ enabled ? '维护中' : '正常运行' }}
|
|
</button>
|
|
<span
|
|
v-if="message"
|
|
class="msg-tag"
|
|
:class="{ error: message.includes('失败') }"
|
|
>{{ message }}</span>
|
|
</div>
|
|
<div class="maintenance-right">
|
|
<input
|
|
:value="reason"
|
|
@input="$emit('update:reason', $event.target.value)"
|
|
class="maintenance-reason-input"
|
|
placeholder="维护原因（选填）"
|
|
/>
|
|
<button class="ghost" type="button" @click="$emit('save')">保存</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
enabled: { type: Boolean, default: false },
|
|
reason: { type: String, default: '' },
|
|
message: { type: String, default: '' }
|
|
})
|
|
|
|
defineEmits(['update:enabled', 'update:reason', 'save'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.maintenance-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
padding: 14px 18px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.maintenance-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.maintenance-label {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.maintenance-toggle {
|
|
padding: 6px 16px;
|
|
border-radius: 999px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, transform 0.15s ease;
|
|
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
|
}
|
|
|
|
.toggle-on {
|
|
background: rgba(201, 90, 106, 0.15);
|
|
color: #c95a6a;
|
|
}
|
|
|
|
.toggle-on:hover {
|
|
background: rgba(201, 90, 106, 0.25);
|
|
}
|
|
|
|
.toggle-off {
|
|
background: rgba(100, 185, 140, 0.15);
|
|
color: #3a9a68;
|
|
}
|
|
|
|
.toggle-off:hover {
|
|
background: rgba(100, 185, 140, 0.25);
|
|
}
|
|
|
|
.maintenance-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.maintenance-reason-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--line);
|
|
background: rgba(255, 255, 255, 0.7);
|
|
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
|
font-size: 15px;
|
|
outline: none;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.maintenance-reason-input:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.msg-tag {
|
|
font-size: 15px;
|
|
color: var(--accent-2);
|
|
padding: 4px 10px;
|
|
border-radius: 5px;
|
|
background: rgba(145, 168, 208, 0.1);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.msg-tag.error {
|
|
color: #c95a6a;
|
|
background: rgba(201, 90, 106, 0.08);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.maintenance-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
padding: 10px 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.maintenance-right {
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.maintenance-reason-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 14px;
|
|
padding: 7px 10px;
|
|
}
|
|
}
|
|
</style>
|