继续测试动画与设置逻辑

static/app.js

@@ -404,6 +404,7 @@ const app = createApp({
         };
 
         const removeProxy = async (id) => {
+            console.log('🔍 removeProxy 被调用, id:', id);  // ← 加这行
             if (!confirm('确定要删除这条隧道吗？')) return;
             const result = await deleteProxy(id);
             if (result.code === 0) {

static/index.html

@@ -211,8 +211,9 @@
         </div>
 
         <!-- ====== 新增/编辑弹窗 ====== -->
-        <div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false">
-            <div class="dialog-card">
+<Transition name="dialog">
+    <div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false">
+        <div class="dialog-card">
                 <h3>{{ dialogMode === 'add' ? '新增隧道' : '编辑隧道' }}</h3>
                 <div class="dialog-form">
                     <div class="form-row">
@@ -248,14 +249,14 @@
                     <button class="btn-confirm" @click="confirmDialog">确认</button>
                 </div>
             </div>
-        </div>
+        </Transition>
 
         <!-- ====== 隐藏的文件输入（导入 TOML） ====== -->
         <input type="file" id="tomlFileInput" accept=".toml" style="display: none" @change="handleImport" />
     </div>
 
     <!-- 应用逻辑 -->
-<script src="/static/app.js"></script>
+    <script src="/static/app.js"></script>
 </body>
 
 </html>

static/style-3.css

@@ -581,4 +581,27 @@ select:disabled {
     opacity: 0.4;
     cursor: not-allowed;
     pointer-events: none;
+}
+
+/* ===== 弹窗入场/出场动画 ===== */
+.dialog-enter-active,
+.dialog-leave-active {
+    transition: all 0.3s ease;
+}
+
+.dialog-enter-from,
+.dialog-leave-to {
+    opacity: 0;
+}
+
+.dialog-enter-from .dialog-card,
+.dialog-leave-to .dialog-card {
+    transform: scale(0.85) translateY(-10px);
+    opacity: 0;
+}
+
+.dialog-enter-to .dialog-card,
+.dialog-leave-from .dialog-card {
+    transform: scale(1) translateY(0);
+    opacity: 1;
 }