From d6128e623de86a32a15fab59939584c431e7c6b2 Mon Sep 17 00:00:00 2001
From: hmo <staymo7777@gmail.com>
Date: Mon, 27 Apr 2026 03:57:46 +0800
Subject: [PATCH] refactor: unify toolbar style with card wrapper in problems
 and classes pages

---
 app/templates/classes.html  | 32 ++++++++-------
 app/templates/problems.html | 82 ++++++++++++++++++-------------------
 2 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/app/templates/classes.html b/app/templates/classes.html
index 3cc8c74..1036315 100644
--- a/app/templates/classes.html
+++ b/app/templates/classes.html
@@ -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">
diff --git a/app/templates/problems.html b/app/templates/problems.html
index 425c764..9efd3cf 100644
--- a/app/templates/problems.html
+++ b/app/templates/problems.html
@@ -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>