路由页动效与细节一批

基调是简单快速：hover 颜色 0.15s 过渡（全局规则，只过渡颜色不碰布局）、
对话框入场淡入加 6px 上移、tab 下划线改成共享的一条并在切换时滑动、tab
内容 out-in 淡切、配置折叠箭头居右随展开旋转 90 度、订阅下拉 0.12s 出入场。
不引 animate.css：这些效果各自十几行 CSS，引库只多不少。

配置展开和拨开链式代理时，若详情底部长出窗口则平滑滚进视野；tab 切换
不触发，来回切时页面跟着跳只会晕。二次确认对话框点遮罩可关闭，内边距
挪进内层，否则点在 dialog 自己的 padding 上也会被当成遮罩。新增入站的
表单不做遮罩关闭：误点会丢掉填了一半的内容。对话框标题改为「新增路由」
「编辑路由」。select 换自绘箭头，原生箭头贴边且位置调不了。

web/components/ConfirmDialog.vue

@@ -25,28 +25,46 @@ watch(
     else dialog.value?.close()
   },
 )
+
+/** 点在遮罩上就关闭。内容区的点击 target 是 .body 里的元素，到不了 dialog 本身。 */
+function onBackdrop(event: MouseEvent) {
+  if (event.target === dialog.value) emit('close')
+}
 </script>
 
 <template>
-  <dialog ref="dialog" class="dlg" @close="emit('close')" @cancel.prevent="emit('close')">
-    <p class="msg">{{ message }}</p>
-    <footer class="acts">
-      <button type="button" class="btn" @click="emit('close')">取消</button>
-      <button type="button" class="btn go" @click="emit('confirm')">{{ action }}</button>
-    </footer>
+  <dialog
+    ref="dialog"
+    class="dlg"
+    @click="onBackdrop"
+    @close="emit('close')"
+    @cancel.prevent="emit('close')"
+  >
+    <div class="body">
+      <p class="msg">{{ message }}</p>
+      <footer class="acts">
+        <button type="button" class="btn" @click="emit('close')">取消</button>
+        <button type="button" class="btn go" @click="emit('confirm')">{{ action }}</button>
+      </footer>
+    </div>
   </dialog>
 </template>
 
 <style scoped>
 .dlg {
   width: min(400px, calc(100vw - 2 * var(--s-5)));
-  padding: var(--s-5);
+  /* 内边距放在 .body 上：dialog 自己的内边距区域点了会被当成遮罩点击 */
+  padding: 0;
   border: 1px solid var(--c-border-strong);
   border-radius: var(--r-lg);
   background: var(--c-surface);
   color: var(--c-text);
 }
 
+.body {
+  padding: var(--s-5);
+}
+
 .dlg::backdrop {
   background: rgb(0 0 0 / 0.45);
 }