hmo/piano-plan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: unify toolbar style with card wrapper in problems and classes pages

Browse Source
This commit is contained in:
hmo
2026-04-27 03:57:46 +08:00
parent 70678095ce
commit d6128e623d
2 changed files with 59 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/classes.html
+18 -14
View File
@@ -3,21 +3,25 @@
{% block title %}班级管理 - 钢琴练习方案系统{% endblock %} {% block title %}班级管理 - 钢琴练习方案系统{% endblock %}
{% block content %} {% block content %}
<div class="d-flex justify-content-between align-items-center mb-4"> <div class="card mb-3">
<div class="d-flex align-items-center gap-3"> <div class="card-body">
<h4><i class="bi bi-collection"></i> 班级管理</h4> <div class="d-flex justify-content-between align-items-center">
<select class="form-select form-select-sm" style="width:auto;" id="activeFilter" onchange="loadClasses()"> <div class="d-flex align-items-center gap-3">
<option value="">全部班级</option> <h5 class="mb-0"><i class="bi bi-collection"></i> 班级管理</h5>
<option value="true" selected>进行中</option> <select class="form-select form-select-sm" style="width:auto;" id="activeFilter" onchange="loadClasses()">
<option value="false">已结束</option> <option value="">全部班级</option>
</select> <option value="true" selected>进行中</option>
<button class="btn btn-primary btn-sm active" id="mineFilterBtn" onclick="toggleMineFilter()"> <option value="false">已结束</option>
<i class="bi bi-person"></i> 我的 </select>
</button> <button class="btn btn-primary btn-sm" id="mineFilterBtn" onclick="toggleMineFilter()">
<i class="bi bi-person"></i> 我的
</button>
</div>
<button class="btn btn-primary btn-sm" id="addClassBtn" style="display:none;">
<i class="bi bi-plus-circle"></i> 新增班级
</button>
</div>
</div> </div>
<button class="btn btn-primary" id="addClassBtn" style="display:none;">
<i class="bi bi-plus-circle"></i> 新增班级
</button>
</div> </div>
<div class="card"> <div class="card">
app/templates/problems.html
+41 -41
View File
@@ -38,47 +38,47 @@
<div class="tab-content" id="settingsTabsContent"> <div class="tab-content" id="settingsTabsContent">
<!-- 问题配置面板 --> <!-- 问题配置面板 -->
<div class="tab-pane fade show active" id="problemsPane" role="tabpanel"> <div class="tab-pane fade show active" id="problemsPane" role="tabpanel">
<div class="d-flex justify-content-between align-items-center mb-4"> <!-- 工具栏 -->
<h4><i class="bi bi-list-check"></i> 问题配置</h4> <div class="card mb-3">
<div> <div class="card-body">
<button type="button" class="btn btn-outline-secondary btn-sm me-2" onclick="loadProblems()"> <div class="d-flex justify-content-between align-items-center mb-3">
<i class="bi bi-arrow-clockwise"></i> 刷新 <h5 class="mb-0"><i class="bi bi-list-check"></i> 问题配置</h5>
</button> <div>
<button type="button" class="btn btn-primary btn-sm" onclick="showAddModal()"> <button type="button" class="btn btn-outline-secondary btn-sm me-2" onclick="loadProblems()">
<i class="bi bi-plus-lg"></i> 新增问题 <i class="bi bi-arrow-clockwise"></i> 刷新
</button> </button>
</div> <button type="button" class="btn btn-primary btn-sm" onclick="showAddModal()">
</div> <i class="bi bi-plus-lg"></i> 新增问题
</button>
<div class="mb-3"> </div>
<input type="text" class="form-control" placeholder="搜索问题..." id="searchInput" onkeyup="applyProblemFilters()"> </div>
</div> <input type="text" class="form-control mb-3" placeholder="搜索问题..." id="searchInput" onkeyup="applyProblemFilters()">
<div class="row g-3 align-items-center">
<!-- 筛选和分组控制 --> <div class="col-auto">
<div class="row g-3 align-items-center mb-3"> <label class="form-label mb-0">筛选：</label>
<div class="col-auto"> </div>
<label class="form-label mb-0">筛选：</label> <div class="col-auto">
</div> <select class="form-select" id="filterCategory" onchange="applyProblemFilters()">
<div class="col-auto"> <option value="">全部分类</option>
<select class="form-select" id="filterCategory" onchange="applyProblemFilters()"> <option value="综合">综合</option>
<option value="">全部分类</option> <option value="乐理相关">乐理相关</option>
<option value="综合">综合</option> <option value="演奏能力">演奏能力</option>
<option value="乐理相关">乐理相关</option> <option value="其他">其他</option>
<option value="演奏能力">演奏能力</option> </select>
<option value="其他">其他</option> </div>
</select> <div class="col-auto">
</div> <label class="form-label mb-0">分组：</label>
<div class="col-auto"> </div>
<label class="form-label mb-0">分组：</label> <div class="col-auto">
</div> <select class="form-select" id="groupByCategory" onchange="applyProblemFilters()">
<div class="col-auto"> <option value="">不分组</option>
<select class="form-select" id="groupByCategory" onchange="applyProblemFilters()"> <option value="category">按分类分组</option>
<option value="">不分组</option> </select>
<option value="category">按分类分组</option> </div>
</select> <div class="col-auto ms-auto">
</div> <span id="problems-count" class="text-muted small"></span>
<div class="col-auto ms-auto"> </div>
<span id="problems-count" class="text-muted small"></span> </div>
</div> </div>
</div> </div>