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 content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex align-items-center gap-3">
<h4><i class="bi bi-collection"></i> 班级管理</h4>
<select class="form-select form-select-sm" style="width:auto;" id="activeFilter" onchange="loadClasses()">
<option value="">全部班级</option>
<option value="true" selected>进行中</option>
<option value="false">已结束</option>
</select>
<button class="btn btn-primary btn-sm active" id="mineFilterBtn" onclick="toggleMineFilter()">
<i class="bi bi-person"></i> 我的
</button>
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center gap-3">
<h5 class="mb-0"><i class="bi bi-collection"></i> 班级管理</h5>
<select class="form-select form-select-sm" style="width:auto;" id="activeFilter" onchange="loadClasses()">
<option value="">全部班级</option>
<option value="true" selected>进行中</option>
<option value="false">已结束</option>
</select>
<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>
<button class="btn btn-primary" id="addClassBtn" style="display:none;">
<i class="bi bi-plus-circle"></i> 新增班级
</button>
</div>
<div class="card">
app/templates/problems.html
+41 -41
View File
@@ -38,47 +38,47 @@
<div class="tab-content" id="settingsTabsContent">
<!-- 问题配置面板 -->
<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>
<button type="button" class="btn btn-outline-secondary btn-sm me-2" onclick="loadProblems()">
<i class="bi bi-arrow-clockwise"></i> 刷新
</button>
<button type="button" class="btn btn-primary btn-sm" onclick="showAddModal()">
<i class="bi bi-plus-lg"></i> 新增问题
</button>
</div>
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="搜索问题..." id="searchInput" onkeyup="applyProblemFilters()">
</div>
<!-- 筛选和分组控制 -->
<div class="row g-3 align-items-center mb-3">
<div class="col-auto">
<label class="form-label mb-0">筛选：</label>
</div>
<div class="col-auto">
<select class="form-select" id="filterCategory" onchange="applyProblemFilters()">
<option value="">全部分类</option>
<option value="综合">综合</option>
<option value="乐理相关">乐理相关</option>
<option value="演奏能力">演奏能力</option>
<option value="其他">其他</option>
</select>
</div>
<div class="col-auto">
<label class="form-label mb-0">分组：</label>
</div>
<div class="col-auto">
<select class="form-select" id="groupByCategory" onchange="applyProblemFilters()">
<option value="">不分组</option>
<option value="category">按分类分组</option>
</select>
</div>
<div class="col-auto ms-auto">
<span id="problems-count" class="text-muted small"></span>
<!-- 工具栏 -->
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0"><i class="bi bi-list-check"></i> 问题配置</h5>
<div>
<button type="button" class="btn btn-outline-secondary btn-sm me-2" onclick="loadProblems()">
<i class="bi bi-arrow-clockwise"></i> 刷新
</button>
<button type="button" class="btn btn-primary btn-sm" onclick="showAddModal()">
<i class="bi bi-plus-lg"></i> 新增问题
</button>
</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">
<label class="form-label mb-0">筛选：</label>
</div>
<div class="col-auto">
<select class="form-select" id="filterCategory" onchange="applyProblemFilters()">
<option value="">全部分类</option>
<option value="综合">综合</option>
<option value="乐理相关">乐理相关</option>
<option value="演奏能力">演奏能力</option>
<option value="其他">其他</option>
</select>
</div>
<div class="col-auto">
<label class="form-label mb-0">分组：</label>
</div>
<div class="col-auto">
<select class="form-select" id="groupByCategory" onchange="applyProblemFilters()">
<option value="">不分组</option>
<option value="category">按分类分组</option>
</select>
</div>
<div class="col-auto ms-auto">
<span id="problems-count" class="text-muted small"></span>
</div>
</div>
</div>
</div>