feat: 优化定时健康检查配置UI,支持手动输入间隔

改为数字输入框+快捷按钮,支持自定义任意间隔值

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Wenaixi 2026-03-30 23:12:59 +08:00
parent ceb078c455
commit 94561f2750
4 changed files with 81 additions and 7 deletions

View file

@ -251,6 +251,18 @@ async function loadConfiguration() {
if (scheduledHealthCheckIntervalEl) scheduledHealthCheckIntervalEl.value = 600000;
}
// 定时健康检查间隔快捷按钮
const intervalQuickBtns = document.querySelectorAll('#scheduledHealthCheckInterval + .quick-select-btns button');
intervalQuickBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const value = parseInt(btn.getAttribute('data-value'));
if (scheduledHealthCheckIntervalEl) {
scheduledHealthCheckIntervalEl.value = value;
}
});
});
} catch (error) {
console.error('Failed to load configuration:', error);
}

View file

@ -347,7 +347,7 @@ const translations = {
'config.healthCheck.enabled': '启用定时检查',
'config.healthCheck.startupRun': '启动时运行',
'config.healthCheck.interval': '检查间隔',
'config.healthCheck.intervalNote': '设置定时健康检查的执行间隔',
'config.healthCheck.intervalNote': '单位毫秒最小60000ms(1分钟)最大3600000ms(1小时),可手动输入或点击快捷按钮',
'config.log.title': '日志设置',
'config.log.enabled': '启用日志',
'config.log.outputMode': '日志输出模式',

View file

@ -7,6 +7,65 @@
border: 1px solid var(--border-color);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
}
.optional-tag, .form-group label .optional-mark {
font-size: 0.75rem;
color: var(--text-tertiary);
font-weight: 400;
margin-left: 0.5rem;
background: var(--bg-tertiary);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
}
.form-control::placeholder {
color: var(--text-tertiary);
}
textarea.form-control {
resize: vertical;
font-family: inherit;
}
/* 带快捷选择的输入框 */
.input-with-quick-select {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.input-with-quick-select .form-control {
width: 100%;
}
.quick-select-btns {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.quick-select-btns .btn {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
}
.config-form {
max-width: 800px;
margin: 0 auto;

View file

@ -249,12 +249,15 @@
</div>
<div class="form-group">
<label for="scheduledHealthCheckInterval" data-i18n="config.healthCheck.interval">检查间隔</label>
<select id="scheduledHealthCheckInterval" class="form-control">
<option value="300000">5 分钟</option>
<option value="600000" selected>10 分钟</option>
<option value="1800000">30 分钟</option>
</select>
<small class="form-text" data-i18n="config.healthCheck.intervalNote">设置定时健康检查的执行间隔</small>
<div class="input-with-quick-select">
<input type="number" id="scheduledHealthCheckInterval" class="form-control" min="60000" max="3600000" step="60000" value="600000" placeholder="毫秒">
<div class="quick-select-btns">
<button type="button" class="btn btn-sm btn-outline-secondary" data-value="300000">5分钟</button>
<button type="button" class="btn btn-sm btn-outline-secondary" data-value="600000">10分钟</button>
<button type="button" class="btn btn-sm btn-outline-secondary" data-value="1800000">30分钟</button>
</div>
</div>
<small class="form-text" data-i18n="config.healthCheck.intervalNote">单位毫秒最小60000ms(1分钟)最大3600000ms(1小时)</small>
</div>
</div>