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

app/templates/admin_invites.html

@@ -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';
+    var num = form.querySelector('[name="max_uses"]').parentElement;
-    form.querySelector('.aif-edit-date').style.display = val === 'expires' ? 'flex' : 'none';
+    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 %}