默认入站：显示可选出站，并给一条转成命名入站的路

上一版把默认入站的整个出站块都藏了，结果策略组也看不见。改成只藏 RULE/DIRECT/GLOBAL
那三张卡（它固定是 RULE），策略组和线路照常列出来当上下文，只是不可点。

顺带修一个显示错误：老式顶层端口没有 listen 字段，实际地址是内核从 allow-lan 和
bind-address 推出来的（listener/listener.go:709-718）——allow-lan 关着时绑的是
127.0.0.1，而界面一律显示 0.0.0.0，会让人以为局域网连得上。

转换时会把老式端口字段删掉并把推导出的地址显式写进 listen：不删会导致同一个端口被声明
两次内核起不来，不写 listen 则以后改 allow-lan 会连带影响这个端口。

web/views/InboundDetail.vue

@@ -6,6 +6,7 @@ import type { ProxyInfo } from '../api'
 import IconOffline from '~icons/ri/cloud-off-line'
 import IconEdit from '~icons/ri/edit-line'
 import IconDelete from '~icons/ri/delete-bin-line'
+import IconConvert from '~icons/ri/swap-line'
 
 const props = defineProps<{
   inbound: Inbound
@@ -18,7 +19,7 @@ const props = defineProps<{
   saving: boolean
 }>()
 
-const emit = defineEmits<{ pick: [mode: OutboundMode]; edit: []; remove: [] }>()
+const emit = defineEmits<{ pick: [mode: OutboundMode]; edit: []; remove: []; convert: [] }>()
 
 interface Option {
   key: string
@@ -129,14 +130,20 @@ function delayClass(ms: number | null): string {
       </dl>
     </header>
 
-    <p v-if="locked" class="aside-note locked-note">
-      由 <code>{{ inbound.legacyKey }}</code> 声明，这种写法没有 proxy 字段，出站固定是 RULE
-    </p>
-
-    <section v-else class="pick">
+    <section class="pick">
       <h3>出站</h3>
 
-      <div class="grid">
+      <div v-if="locked" class="convert">
+        <p>
+          由 <code>{{ inbound.legacyKey }}</code> 声明，这种写法没有 proxy 字段，出站固定是
+          <span class="mono">RULE</span>，下面这些都不能选。
+        </p>
+        <button type="button" :disabled="saving" @click="emit('convert')">
+          <IconConvert /> 转成命名入站
+        </button>
+      </div>
+
+      <div v-if="!locked" class="grid">
         <button
           v-for="opt in builtins"
           :key="opt.key"
@@ -151,7 +158,7 @@ function delayClass(ms: number | null): string {
       </div>
 
       <template v-if="groupOptions.length">
-        <h4>策略组</h4>
+        <h4 :class="locked && 'is-dim'">策略组</h4>
         <div class="grid">
           <button
             v-for="opt in groupOptions"
@@ -171,7 +178,7 @@ function delayClass(ms: number | null): string {
       </template>
 
       <template v-if="ownOptions.length">
-        <h4>自有线路</h4>
+        <h4 :class="locked && 'is-dim'">自有线路</h4>
         <div class="grid">
           <button
             v-for="opt in ownOptions"
@@ -190,7 +197,7 @@ function delayClass(ms: number | null): string {
         </div>
       </template>
 
-      <h4>订阅线路</h4>
+      <h4 :class="locked && 'is-dim'">订阅线路</h4>
       <p v-if="!kernelOnline" class="aside-note">
         <IconOffline />
         内核未连接。订阅里有哪些线路只有运行中的内核知道
@@ -301,8 +308,43 @@ function delayClass(ms: number | null): string {
   cursor: not-allowed;
 }
 
-.locked-note {
-  margin: var(--s-4) 0 0;
+.convert {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s-3);
+  padding: var(--s-3);
+  border: 1px solid var(--c-border);
+  border-radius: var(--r-sm);
+  background: var(--c-surface-sunken);
+  margin-bottom: var(--s-4);
+}
+
+.convert p {
+  color: var(--c-text-soft);
+  font-size: var(--t-sm);
+  line-height: 1.6;
+}
+
+.convert button {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+  font-size: var(--t-sm);
+  cursor: pointer;
+}
+
+.convert button:hover:not(:disabled) {
+  border-color: var(--c-accent);
+  color: var(--c-accent-text);
+}
+
+.is-dim {
+  opacity: 0.6;
 }
 
 .pick {