路由页动效与细节一批

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

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

web/components/SourcePicker.vue

@@ -92,7 +92,8 @@ function onFocusOut(event: FocusEvent) {
       />
     </div>
 
-    <ul v-if="open" class="menu" role="listbox" aria-multiselectable="true">
+    <Transition name="menu">
+      <ul v-if="open" class="menu" role="listbox" aria-multiselectable="true">
       <li v-if="options.length === 0" class="none">没有可选的订阅</li>
       <li v-else-if="filtered.length === 0" class="none">没有匹配的订阅</li>
       <li v-for="(name, i) in filtered" :key="name">
@@ -108,7 +109,8 @@ function onFocusOut(event: FocusEvent) {
           {{ name }}
         </button>
       </li>
-    </ul>
+      </ul>
+    </Transition>
   </div>
 </template>
 
@@ -128,6 +130,7 @@ function onFocusOut(event: FocusEvent) {
   border-radius: var(--r-sm);
   background: var(--c-surface);
   cursor: text;
+  transition: border-color 0.15s ease;
 }
 
 .box:focus-within {
@@ -230,4 +233,17 @@ function onFocusOut(event: FocusEvent) {
   color: var(--c-text-faint);
   font-size: var(--t-sm);
 }
+
+.menu-enter-active,
+.menu-leave-active {
+  transition:
+    opacity 0.12s ease,
+    transform 0.12s ease;
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
 </style>