fix(admin-invites): create form label margin-top:0, edit form inline conditional fields

This commit is contained in:
2026-07-06 08:27:34 +08:00
parent 9aab88ae8f
commit b285c4b588

View File

@@ -17,11 +17,11 @@
<h3 style="margin-bottom:.75rem">创建邀请码</h3>
<form method="post" action="/admin/invites/add" style="display:flex;flex-direction:column;gap:.85rem">
<div>
<label>邀请码(留空自动生成)</label>
<label style="margin-top:0">邀请码(留空自动生成)</label>
<input type="text" name="code" maxlength="8" placeholder="自动生成" style="text-transform:uppercase">
</div>
<div>
<label>限制类型</label>
<label style="margin-top:0">限制类型</label>
<select name="limit_type" id="limit_type" onchange="toggleLimitFields()">
<option value="unlimited">无限制</option>
<option value="uses">使用次数</option>
@@ -29,11 +29,11 @@
</select>
</div>
<div id="max_uses_field" style="display:none">
<label>最大使用次数</label>
<label style="margin-top:0">使用次数</label>
<input type="number" name="max_uses" min="1" value="1">
</div>
<div id="expires_field" style="display:none">
<label>过期时间</label>
<label style="margin-top:0">过期时间</label>
<input type="datetime-local" name="expires_at">
</div>
<div class="form-actions">
@@ -70,10 +70,12 @@
<option value="expires"{% if c.expires_at %} selected{% endif %}>有效期</option>
</select>
</div>
<div class="aif-field aif-edit-num" style="display:{% if c.max_uses is not none %}flex{% else %}none{% endif %}">
<div style="display:{% if c.max_uses is not none %}inline-flex{% else %}none{% endif %};align-items:center;gap:.3rem;align-self:flex-end">
<label style="margin:0;font-size:.8rem;white-space:nowrap">次数</label>
<input type="number" name="max_uses" value="{{ c.max_uses or 1 }}" min="1" class="aif-input aif-short">
</div>
<div class="aif-field aif-edit-date" style="display:{% if c.expires_at %}flex{% else %}none{% endif %}">
<div style="display:{% if c.expires_at %}inline-flex{% else %}none{% endif %};align-items:center;gap:.3rem;align-self:flex-end">
<label style="margin:0;font-size:.8rem;white-space:nowrap">有效期</label>
<input type="datetime-local" name="expires_at" value="{{ c.expires_at|to_local|strftime('%Y-%m-%dT%H:%M') if c.expires_at else '' }}" class="aif-input aif-date">
</div>
<div style="display:flex;gap:.4rem;align-self:flex-end">
@@ -100,8 +102,10 @@ function toggleLimitFields() {
}
function toggleEditFields(id, val) {
var form = document.getElementById('edit-form-' + id);
form.querySelector('.aif-edit-num').style.display = val === 'uses' ? 'flex' : 'none';
form.querySelector('.aif-edit-date').style.display = val === 'expires' ? 'flex' : 'none';
var num = form.querySelector('[name="max_uses"]').parentElement;
var date = form.querySelector('[name="expires_at"]').parentElement;
num.style.display = val === 'uses' ? 'inline-flex' : 'none';
date.style.display = val === 'expires' ? 'inline-flex' : 'none';
}
</script>
{% endblock %}