fix: 修复模态框无法打开问题，改用classList控制显隐

templates/evaluations.html

@@ -13,7 +13,7 @@
       <p class="text-xs text-gray-400 mt-0.5">记录老师定期评价结果</p>
     </div>
   </div>
-  <button onclick="openModal()" class="inline-flex items-center gap-2 bg-amber-500 text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-amber-600 transition shadow-sm">
+  <button id="btnAddEval" class="inline-flex items-center gap-2 bg-amber-500 text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-amber-600 transition shadow-sm">
     <i class="fa-solid fa-plus"></i>新增评价
   </button>
 </div>
@@ -68,18 +68,18 @@
 <div class="bg-white rounded-2xl border border-gray-100 p-16 text-center">
   <div class="text-6xl text-gray-200 mb-4"><i class="fa-solid fa-clipboard"></i></div>
   <p class="text-gray-400 mb-6">暂无评价记录</p>
-  <button onclick="openModal()" class="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl text-sm font-medium hover:bg-amber-600 transition">
+  <button id="btnAddEvalEmpty" class="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl text-sm font-medium hover:bg-amber-600 transition">
     <i class="fa-solid fa-plus"></i>新增第一条评价
   </button>
 </div>
 {% endif %}
 
 <!-- Modal -->
-<div id="evalModal" class="fixed inset-0 z-50 items-center justify-center modal-overlay bg-black/40" style="display:none">
+<div id="evalModal" class="fixed inset-0 z-50 hidden items-center justify-center modal-overlay bg-black/40">
   <div class="bg-white rounded-2xl w-full max-w-lg mx-4 shadow-2xl max-h-[90vh] overflow-y-auto">
     <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between sticky top-0 bg-white z-10 rounded-t-2xl">
       <h3 class="font-bold text-gray-800">新增知识评价</h3>
-      <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-lg"></i></button>
+      <button id="btnCloseEvalModal" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-lg"></i></button>
     </div>
     <form method="POST" action="/evaluations/add" enctype="multipart/form-data" class="p-6 space-y-5">
       <div>
@@ -114,7 +114,7 @@
           class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-medium file:bg-amber-50 file:text-amber-600 hover:file:bg-amber-100">
       </div>
       <div class="flex gap-3 pt-2">
-        <button type="button" onclick="closeModal()" class="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-xl text-sm font-medium hover:bg-gray-50 transition">取消</button>
+        <button type="button" id="btnCancelEval" class="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-xl text-sm font-medium hover:bg-gray-50 transition">取消</button>
         <button type="submit" class="flex-1 bg-amber-500 text-white py-2.5 rounded-xl text-sm font-medium hover:bg-amber-600 transition">保存评价</button>
       </div>
     </form>
@@ -124,9 +124,23 @@
 
 {% block extra_js %}
 <script>
-const today=new Date().toISOString().slice(0,10);
-document.querySelectorAll('input[name="date"][value]').forEach(el=>{if(!el.value)el.value=today;});
-function openModal(){const m=document.getElementById('evalModal');m.style.display='flex';}
-function closeModal(){const m=document.getElementById('evalModal');m.style.display='none';}
+(function(){
+  var modal = document.getElementById('evalModal');
+  function openModal(){ if(modal) modal.classList.remove('hidden'); }
+  function closeModal(){ if(modal) modal.classList.add('hidden'); }
+  var btns = document.querySelectorAll('#btnAddEval, #btnAddEvalEmpty');
+  var closeBtns = document.querySelectorAll('#btnCloseEvalModal, #btnCancelEval');
+  btns.forEach(function(b){ if(b) b.addEventListener('click', openModal); });
+  closeBtns.forEach(function(b){ if(b) b.addEventListener('click', closeModal); });
+  if(modal){
+    modal.addEventListener('click', function(e){
+      if(e.target === modal) closeModal();
+    });
+  }
+  var today = new Date().toISOString().slice(0,10);
+  document.querySelectorAll('input[name="date"]').forEach(function(el){
+    if(!el.value) el.value = today;
+  });
+})();
 </script>
 {% endblock %}

templates/subjects.html

@@ -7,7 +7,7 @@
   <div>
     <p class="text-xs text-gray-400">管理你的所有科目</p>
   </div>
-  <button onclick="openModal()" class="inline-flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-600 transition shadow-sm">
+  <button id="btnCreate" class="inline-flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-600 transition shadow-sm">
     <i class="fa-solid fa-plus"></i>新建科目
   </button>
 </div>
@@ -42,18 +42,18 @@
 <div class="bg-white rounded-2xl border border-gray-100 p-16 text-center">
   <div class="text-6xl text-gray-200 mb-4"><i class="fa-solid fa-folder-open"></i></div>
   <p class="text-gray-400 mb-6">还没有科目，先创建一个吧</p>
-  <button onclick="openModal()" class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">
+  <button id="btnCreateEmpty" class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">
     <i class="fa-solid fa-plus"></i>新建第一个科目
   </button>
 </div>
 {% endif %}
 
 <!-- Create modal -->
-<div id="createModal" class="fixed inset-0 z-50 items-center justify-center modal-overlay bg-black/40" style="display:none">
-  <div class="bg-white rounded-2xl w-full max-w-md mx-4 shadow-2xl">
+<div id="createModal" class="fixed inset-0 z-50 hidden items-center justify-center modal-overlay bg-black/40">
+  <div class="bg-white rounded-2xl w-full max-w-md mx-4 shadow-2xl max-h-[90vh] overflow-y-auto">
     <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between sticky top-0 bg-white z-10 rounded-t-2xl">
       <h3 class="font-bold text-gray-800">新建科目</h3>
-      <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-lg"></i></button>
+      <button id="btnCloseModal" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-lg"></i></button>
     </div>
     <form method="POST" action="/subjects/create" class="p-6">
       <div class="mb-5">
@@ -66,15 +66,15 @@
         <div class="flex gap-2 flex-wrap">
           {% for c in colors %}
           <label class="cursor-pointer">
-            <input type="radio" name="color" value="{{ c }}" {% if loop.first %}checked{% endif %} class="hidden peer">
-            <span class="w-8 h-8 rounded-full block peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-400 transition hover:scale-110"
+            <input type="radio" name="color" value="{{ c }}" {% if loop.first %}checked{% endif %} class="hidden peer" data-color="{{ c }}">
+            <span class="w-8 h-8 rounded-full block peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-400 transition hover:scale-110 ring-transparent"
               style="background-color:{{ c }};"></span>
           </label>
           {% endfor %}
         </div>
       </div>
       <div class="flex gap-3">
-        <button type="button" onclick="closeModal()" class="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-xl text-sm font-medium hover:bg-gray-50 transition">取消</button>
+        <button type="button" id="btnCancel" class="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-xl text-sm font-medium hover:bg-gray-50 transition">取消</button>
         <button type="submit" class="flex-1 bg-primary text-white py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">创建</button>
       </div>
     </form>
@@ -84,15 +84,29 @@
 
 {% block extra_js %}
 <script>
-function openModal(){const m=document.getElementById('createModal');m.style.display='flex';}
-function closeModal(){const m=document.getElementById('createModal');m.style.display='none';}
-document.querySelectorAll('input[name="color"]').forEach(r=>{
-  r.addEventListener('change',function(){
-    document.querySelectorAll('input[name="color"]~span').forEach(s=>s.style.boxShadow='none');
-    this.nextElementSibling.style.boxShadow='0 0 0 3px '+this.value+'40';
+(function(){
+  var modal = document.getElementById('createModal');
+  function openModal(){ if(modal) modal.classList.remove('hidden'); }
+  function closeModal(){ if(modal) modal.classList.add('hidden'); }
+  var btns = document.querySelectorAll('#btnCreate, #btnCreateEmpty');
+  var closeBtns = document.querySelectorAll('#btnCloseModal, #btnCancel');
+  btns.forEach(function(b){ b.addEventListener('click', openModal); });
+  closeBtns.forEach(function(b){ b.addEventListener('click', closeModal); });
+  if(modal){
+    modal.addEventListener('click', function(e){
+      if(e.target === modal) closeModal();
+    });
+  }
+  document.querySelectorAll('input[name="color"]').forEach(function(r){
+    r.addEventListener('change', function(){
+      document.querySelectorAll('input[name="color"]').forEach(function(el){
+        el.nextElementSibling.classList.add('ring-transparent');
+        el.nextElementSibling.classList.remove('ring-2','ring-offset-2','ring-gray-400');
+      });
+      this.nextElementSibling.classList.remove('ring-transparent');
+      this.nextElementSibling.classList.add('ring-2','ring-offset-2','ring-gray-400');
+    });
   });
-});
-// Init color ring
-document.querySelector('input[name="color"]:checked')?.nextElementSibling.style.boxShadow='0 0 0 3px '+document.querySelector('input[name="color"]:checked').value+'40';
+})();
 </script>
 {% endblock %}