ux: 体验优化

ui/css/style.css

@@ -312,3 +312,27 @@ input[type='range'].slider::-moz-range-thumb:active {
     background: linear-gradient(to bottom right, #d1fae5, #a7f3d0) !important;
     border-color: #059669 !important;
 }
+
+/* 弹窗动画 - 遮罩淡入 */
+.modal-backdrop {
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+}
+
+.modal-backdrop.show {
+    opacity: 1;
+}
+
+/* 弹窗内容动画 - 缩放+平移 */
+.modal-content {
+    opacity: 0;
+    transform: scale(0.92) translateY(10px);
+    transition:
+        opacity 0.25s ease-out,
+        transform 0.25s ease-out;
+}
+
+.modal-backdrop.show .modal-content {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+}

ui/index.html

@@ -206,11 +206,11 @@
         <!-- 全局设置弹窗 -->
         <div
             id="settings-modal"
-            class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+            class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm modal-backdrop"
         >
             <div
-                class="bg-white shadow-2xl p-6 w-full mx-4 transform transition-all"
-                style="border-radius: 0.5rem; max-width: 700px"
+                class="bg-white shadow-2xl p-6 w-full mx-4 modal-content"
+                style="border-radius: 0.3rem; max-width: 700px"
             >
                 <h2 class="text-xl font-semibold text-gray-800 mb-5">全局设置</h2>
 
@@ -348,10 +348,11 @@
                     </div>
                 </div>
 
-                <div class="flex mt-6 pt-5 border-t border-gray-200">
+                <div class="flex mt-6">
                     <button
                         id="close-settings"
-                        class="w-full py-2.5 px-6 bg-blue-500 text-white text-sm font-semibold hover:bg-blue-600 active:bg-blue-700 transition-colors shadow-md hover:shadow-lg rounded-lg"
+                        class="w-full py-2.5 px-6 bg-blue-500 text-white text-sm font-semibold hover:bg-blue-600 active:bg-blue-700 transition-colors shadow-md hover:shadow-lg"
+                        style="border-radius: 0.3rem"
                     >
                         保存设置
                     </button>

ui/js/main.js

@@ -224,11 +224,20 @@ function getCompressionLevel() {
 // 显示设置弹窗
 function showSettingsModal() {
     settingsModal.classList.remove('hidden')
+    // 强制重排以触发动画
+    void settingsModal.offsetHeight
+    settingsModal.classList.add('show')
 }
 
 // 隐藏设置弹窗
 function hideSettingsModal() {
-    settingsModal.classList.add('hidden')
+    settingsModal.classList.remove('show')
+    // 等待动画结束后再隐藏
+    setTimeout(() => {
+        if (!settingsModal.classList.contains('show')) {
+            settingsModal.classList.add('hidden')
+        }
+    }, 250)
 }
 
 // 扫描文件夹获取所有exe和dll文件