fix(admin-invites): create card uses form-card style, align save/delete with select via align-self flex-end

This commit is contained in:
2026-07-06 08:21:54 +08:00
parent b10be81505
commit f0a4e704ea
2 changed files with 21 additions and 24 deletions

View File

@@ -289,7 +289,7 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
/* Admin invite form */ /* Admin invite form */
.admin-invite-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; } .admin-invite-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.aif-row { display: flex; flex-direction: column; gap: .3rem; } .aif-row { display: flex; flex-direction: column; gap: .3rem; }
.aif-field { display: flex; flex-direction: column; gap: .15rem; justify-content: flex-end; } .aif-field { display: flex; flex-direction: column; gap: .15rem; }
.aif-grow { flex: 1 1 200px; min-width: 0; } .aif-grow { flex: 1 1 200px; min-width: 0; }
.aif-label { font-size: .8rem; color: var(--text-muted); line-height: 1.2; } .aif-label { font-size: .8rem; color: var(--text-muted); line-height: 1.2; }
.aif-input, .aif-select { width: 100%; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 6px; font-size: .9rem; background: #fff; line-height: 1.3; } .aif-input, .aif-select { width: 100%; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 6px; font-size: .9rem; background: #fff; line-height: 1.3; }

View File

@@ -13,31 +13,31 @@
{% endif %} {% endif %}
<!-- Add new code --> <!-- Add new code -->
<div style="margin-bottom:2rem;padding:1.5rem;background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border)"> <div class="form-card" style="margin-bottom:1.5rem">
<h3 style="margin-bottom:1rem;font-size:1rem">创建邀请码</h3> <h3 style="margin-bottom:.75rem">创建邀请码</h3>
<form method="post" action="/admin/invites/add" class="admin-invite-form" style="flex-direction:column;gap:.85rem"> <form method="post" action="/admin/invites/add" style="display:flex;flex-direction:column;gap:.85rem">
<div class="aif-row"> <div>
<label class="aif-label">邀请码(留空自动生成)</label> <label>邀请码(留空自动生成)</label>
<input type="text" name="code" maxlength="8" placeholder="自动生成" class="aif-input" style="text-transform:uppercase"> <input type="text" name="code" maxlength="8" placeholder="自动生成" style="text-transform:uppercase">
</div> </div>
<div class="aif-row"> <div>
<label class="aif-label">限制类型</label> <label>限制类型</label>
<select name="limit_type" id="limit_type" onchange="toggleLimitFields()" class="aif-select"> <select name="limit_type" id="limit_type" onchange="toggleLimitFields()">
<option value="unlimited">无限制</option> <option value="unlimited">无限制</option>
<option value="uses">使用次数</option> <option value="uses">使用次数</option>
<option value="expires">有效期</option> <option value="expires">有效期</option>
</select> </select>
</div> </div>
<div class="aif-row" id="max_uses_field" style="display:none"> <div id="max_uses_field" style="display:none">
<label class="aif-label">最大使用次数</label> <label>最大使用次数</label>
<input type="number" name="max_uses" min="1" value="1" class="aif-input"> <input type="number" name="max_uses" min="1" value="1">
</div> </div>
<div class="aif-row" id="expires_field" style="display:none"> <div id="expires_field" style="display:none">
<label class="aif-label">过期时间</label> <label>过期时间</label>
<input type="datetime-local" name="expires_at" class="aif-input"> <input type="datetime-local" name="expires_at">
</div> </div>
<div class="aif-row" style="margin-top:.35rem"> <div class="form-actions">
<button type="submit" class="btn btn-primary" style="width:fit-content">创建</button> <button type="submit" class="btn btn-primary">创建</button>
</div> </div>
</form> </form>
</div> </div>
@@ -76,13 +76,10 @@
<div class="aif-field aif-edit-date" style="display:{% if c.expires_at %}flex{% else %}none{% endif %}"> <div class="aif-field aif-edit-date" style="display:{% if c.expires_at %}flex{% else %}none{% endif %}">
<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"> <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>
<div class="aif-field aif-btn-wrap"> <div style="display:flex;gap:.4rem;align-self:flex-end">
<span class="aif-label" style="visibility:hidden">.</span>
<div style="display:flex;gap:.4rem">
<button type="submit" class="btn btn-sm">保存</button> <button type="submit" class="btn btn-sm">保存</button>
<button type="button" class="btn btn-danger btn-sm" onclick="if(confirm('确定删除?'))this.closest('form').nextElementSibling.submit()">删除</button> <button type="button" class="btn btn-danger btn-sm" onclick="if(confirm('确定删除?'))this.closest('form').nextElementSibling.submit()">删除</button>
</div> </div>
</div>
</form> </form>
<form method="post" action="/admin/invites/{{ c.id }}/delete" style="display:none"></form> <form method="post" action="/admin/invites/{{ c.id }}/delete" style="display:none"></form>
</div> </div>