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

app/templates/classes.html

@@ -3,22 +3,26 @@
 {% block title %}班级管理 - 钢琴练习方案系统{% endblock %}
 
 {% block content %}
-<div class="d-flex justify-content-between align-items-center mb-4">
+<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">
-        <h4><i class="bi bi-collection"></i> 班级管理</h4>
+                <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 active" id="mineFilterBtn" onclick="toggleMineFilter()">
+                <button class="btn btn-primary btn-sm" id="mineFilterBtn" onclick="toggleMineFilter()">
                     <i class="bi bi-person"></i> 我的
                 </button>
             </div>
-    <button class="btn btn-primary" id="addClassBtn" style="display:none;">
+            <button class="btn btn-primary btn-sm" id="addClassBtn" style="display:none;">
                 <i class="bi bi-plus-circle"></i> 新增班级
             </button>
         </div>
+    </div>
+</div>
 
 <div class="card">
     <div class="card-body">

app/templates/problems.html

@@ -38,8 +38,11 @@
 <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 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> 刷新
@@ -49,13 +52,8 @@
                         </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">
+                <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>
@@ -81,6 +79,8 @@
                         <span id="problems-count" class="text-muted small"></span>
                     </div>
                 </div>
+            </div>
+        </div>
 
         <div class="row" id="problemList"></div>
     </div>