Fix env config tabs with CSS radio labels, no JS required

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-08 21:19:23 +08:00
parent 4b3373a68d
commit 12e44ab26d
5 changed files with 73 additions and 47 deletions
+6 -3
View File
@@ -1,4 +1,4 @@
{# env配置:Tab 分类 + 双列表单,顶部统一保存 #}
{# env配置:CSS Tab(无需 JS+ 双列表单 #}
<div class="env-config-page">
<div class="env-config-head card">
<div class="env-config-head-row">
@@ -17,14 +17,17 @@
{% if env_config_groups %}
<div class="env-config-body card" data-env-ssr="1" id="env-config-body">
{% for group in env_config_groups %}
<input type="radio" name="env-section" id="env-sec-{{ loop.index0 }}" class="env-tab-radio"{% if loop.first %} checked{% endif %}>
{% endfor %}
<div class="env-config-tabs" role="tablist" aria-label="配置分类">
{% for group in env_config_groups %}
<button type="button" class="env-tab-btn{% if loop.first %} is-active{% endif %}" role="tab" data-env-tab="{{ loop.index0 }}" aria-selected="{{ 'true' if loop.first else 'false' }}">{{ group.title }}</button>
<label for="env-sec-{{ loop.index0 }}" class="env-tab-btn" role="tab">{{ group.title }}</label>
{% endfor %}
</div>
<div class="env-config-panels" id="env-config-grid">
{% for group in env_config_groups %}
<section class="env-panel{% if loop.first %} is-active{% endif %}" role="tabpanel" data-env-panel="{{ loop.index0 }}"{% if not loop.first %} hidden{% endif %}>
<section class="env-panel env-panel--{{ loop.index0 }}" role="tabpanel">
{% if group.has_restart %}
<p class="env-panel-hint">本组含需重启项,修改后请点「保存并重启」。</p>
{% endif %}