改成左右布局，接上图标，措辞换成配置里的原词

图标用 unplugin-icons 在打包时内联成 SVG，运行时不发网络请求——目标机器可能没外网，而且一个图标一次请求对 2 核的机器不划算。autoInstall 关掉，不让构建过程偷偷联网装东西。出站显示从「跟着规则走」改成 RULE，其余解释性长句删掉或收进 title。新增了紧凑模式（只显示图标），默认关：这工具是隔一阵子才动一次的，纯图标对偶尔来的人不友好。
2026-08-10 11:37:07 +08:00
parent c6cb91db3f
commit 1fc052028e
8 changed files with 485 additions and 129 deletions
@@ -1,100 +1,162 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { collectInbounds } from '@shared/inbounds.ts'
+import { computed, ref } from 'vue'
+import { collectInbounds, collectOutboundNames } from '@shared/inbounds.ts'
 import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
 import type { ConfigObject } from '../../vendor/config-editor/index.ts'
+import { density } from '../prefs'
+import IconAdd from '~icons/ri/add-line'
+import IconExpand from '~icons/ri/arrow-right-s-line'
+import IconEdit from '~icons/ri/edit-line'
+import IconDelete from '~icons/ri/delete-bin-line'

-const props = defineProps<{ data: ConfigObject; kernelOnline: boolean }>()
+const props = defineProps<{ data: ConfigObject }>()

 const inbounds = computed(() => collectInbounds(props.data))
+const outbounds = computed(() => collectOutboundNames(props.data))
+const expanded = ref<string | null>(null)

-/** 出站去向在表格里怎么显示。「跟着规则走」是弱化的，因为它是默认状态而非用户的选择。 */
+function toggle(id: string) {
+  expanded.value = expanded.value === id ? null : id
+}
+
+/** 出站在行上怎么显示。RULE 是未指定时的默认状态，弱化处理。 */
 function outboundLabel(mode: OutboundMode): { text: string; muted: boolean } {
-  if (mode.kind === 'rules') return { text: '跟着规则走', muted: true }
-  if (mode.kind === 'direct') return { text: '直连', muted: false }
-  if (mode.kind === 'global') return { text: '全局', muted: false }
+  if (mode.kind === 'rules') return { text: 'RULE', muted: true }
+  if (mode.kind === 'direct') return { text: 'DIRECT', muted: false }
+  if (mode.kind === 'global') return { text: 'GLOBAL', muted: false }
  return { text: mode.name, muted: false }
 }

+const TYPE_LABEL: Record<string, string> = {
+  mixed: 'HTTP + SOCKS5',
+  http: 'HTTP',
+  socks: 'SOCKS5',
+  redir: 'REDIR',
+  tproxy: 'TPROXY',
+}
+
 function typeLabel(inbound: Inbound): string {
-  if (inbound.type === 'mixed') return 'HTTP + SOCKS5'
-  if (inbound.type === 'http') return 'HTTP'
-  if (inbound.type === 'socks') return 'SOCKS5'
-  if (inbound.type === 'redir') return '透明代理'
-  if (inbound.type === 'tproxy') return '透明代理'
-  return inbound.type
+  return TYPE_LABEL[inbound.type] ?? inbound.type.toUpperCase()
 }
 </script>

 <template>
  <section>
+    <!-- 概览 -->
    <header class="head">
-      <div>
-        <h2>入站</h2>
-        <p class="sub">每一路进来的流量，以及它从哪里出去。</p>
+      <div class="sums">
+        <div class="sum">
+          <span class="sum-n">{{ inbounds.length }}</span>
+          <span class="sum-k">入站</span>
+        </div>
+        <div class="sum">
+          <span class="sum-n">{{ outbounds.groups.length }}</span>
+          <span class="sum-k">策略组</span>
+        </div>
+        <div class="sum">
+          <span class="sum-n">{{ outbounds.ownProxies.length }}</span>
+          <span class="sum-k">自有线路</span>
+        </div>
      </div>
-      <button class="add" type="button" disabled title="下一步做">新增</button>
+
+      <button class="add" type="button" disabled>
+        <IconAdd />
+        <span v-if="density === 'full'">新增</span>
+      </button>
    </header>

+    <!-- 明细 -->
    <ol class="rows">
      <li v-for="inbound in inbounds" :key="inbound.id" class="row">
-        <div class="port">
-          <span class="num">{{ inbound.port }}</span>
+        <button
+          type="button"
+          :class="['line', expanded === inbound.id && 'is-open']"
+          @click="toggle(inbound.id)"
+        >
+          <IconExpand class="caret" />
+
+          <span class="port mono">{{ inbound.port }}</span>
          <span class="type">{{ typeLabel(inbound) }}</span>
-        </div>

-        <div class="mid">
-          <div class="name">
+          <span class="name">
            {{ inbound.name }}
-            <span v-if="inbound.isDefault" class="tag">默认</span>
-          </div>
-          <div v-if="inbound.listen" class="listen mono">{{ inbound.listen }}</div>
-        </div>
+            <span v-if="inbound.isDefault" class="tag" title="由配置顶层的端口字段声明，不可删除">
+              默认
+            </span>
+          </span>

-        <div class="wire" aria-hidden="true"></div>
+          <span class="wire" aria-hidden="true"></span>

-        <div class="out">
-          <span :class="['out-text', outboundLabel(inbound.outbound).muted && 'is-muted']">
+          <span :class="['out', outboundLabel(inbound.outbound).muted && 'is-muted']">
            {{ outboundLabel(inbound.outbound).text }}
          </span>
-          <span v-if="inbound.ruleSet" class="ruleset">附加规则 {{ inbound.ruleSet }}</span>
+        </button>
+
+        <div v-if="expanded === inbound.id" class="detail">
+          <dl>
+            <dt>类型</dt>
+            <dd class="mono">{{ inbound.type }}</dd>
+            <dt>监听</dt>
+            <dd class="mono">{{ inbound.listen ?? '0.0.0.0' }}</dd>
+            <dt>出站</dt>
+            <dd class="mono">{{ outboundLabel(inbound.outbound).text }}</dd>
+            <dt>附加规则</dt>
+            <dd class="mono">{{ inbound.ruleSet ?? '—' }}</dd>
+            <dt v-if="inbound.legacyKey">来源</dt>
+            <dd v-if="inbound.legacyKey" class="mono">{{ inbound.legacyKey }}</dd>
+          </dl>
+
+          <div class="acts">
+            <button type="button" disabled><IconEdit /> 编辑</button>
+            <button type="button" disabled :title="inbound.isDefault ? '默认入站不可删除' : ''">
+              <IconDelete /> 删除
+            </button>
+          </div>
        </div>
      </li>
    </ol>

-    <p v-if="inbounds.length === 0" class="empty">
-      这份配置里没有任何入站。mihomo 不会监听任何端口。
-    </p>
-
-    <p v-if="inbounds.some((i) => i.isDefault)" class="footnote">
-      标着「默认」的入站由配置文件顶层的端口字段声明，这种写法没法单独指定出站，流量一律走分流规则。
-    </p>
+    <p v-if="inbounds.length === 0" class="empty">没有入站。mihomo 不会监听任何端口。</p>
  </section>
 </template>

 <style scoped>
 .head {
  display: flex;
-  align-items: flex-start;
+  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
 }

-h2 {
-  font-size: var(--t-xl);
-  font-weight: 600;
-  letter-spacing: -0.01em;
+.sums {
+  display: flex;
+  gap: var(--s-6);
 }

-.sub {
+.sum {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-2);
+}
+
+.sum-n {
+  font-size: var(--t-2xl);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+
+.sum-k {
  color: var(--c-text-soft);
  font-size: var(--t-sm);
-  margin-top: var(--s-1);
 }

 .add {
-  padding: var(--s-2) var(--s-4);
+  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);
@@ -105,7 +167,6 @@ h2 {
  cursor: not-allowed;
 }

-/* 一层容器，内部用分割线分行——不做卡片套卡片 */
 .rows {
  list-style: none;
  margin: 0;
@@ -116,26 +177,39 @@ h2 {
  overflow: hidden;
 }

-.row {
-  display: grid;
-  grid-template-columns: 7.5rem 1fr 3rem minmax(8rem, auto);
-  align-items: center;
-  gap: var(--s-4);
-  padding: var(--s-4) var(--s-5);
-}
-
 .row + .row {
  border-top: 1px solid var(--c-border);
 }

-.port {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+.line {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 16px 4.5rem 7rem 1fr 2.5rem minmax(6rem, auto);
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-4);
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
 }

-.num {
-  font-family: var(--f-mono);
+.line:hover {
+  background: var(--c-surface-sunken);
+}
+
+.caret {
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-faint);
+  transition: transform 0.12s ease;
+}
+
+.line.is-open .caret {
+  transform: rotate(90deg);
+}
+
+.port {
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
 }
@@ -149,23 +223,18 @@ h2 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
+  min-width: 0;
 }

 .tag {
-  padding: 1px var(--s-2);
+  padding: 0 var(--s-2);
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  font-size: var(--t-xs);
  color: var(--c-text-soft);
-  line-height: 1.5;
+  line-height: 1.6;
 }

-.listen {
-  font-size: var(--t-xs);
-  color: var(--c-text-faint);
-}
-
-/* 插线板的那根线。它承载的信息是「左边这个口通向右边那个出口」 */
 .wire {
  height: 1px;
  background: linear-gradient(
@@ -176,32 +245,66 @@ h2 {
 }

 .out {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
+  font-family: var(--f-mono);
+  font-size: var(--t-sm);
  text-align: right;
 }

-.out-text {
-  font-weight: 500;
-}
-
-.out-text.is-muted {
-  font-weight: 400;
+.out.is-muted {
  color: var(--c-text-faint);
 }

-.ruleset {
-  font-size: var(--t-xs);
+.detail {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--s-5);
+  padding: var(--s-2) var(--s-4) var(--s-4) calc(16px + var(--s-3) + var(--s-4));
+  background: var(--c-surface-sunken);
+  border-top: 1px solid var(--c-border);
+}
+
+dl {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: var(--s-1) var(--s-4);
+  margin: 0;
+  font-size: var(--t-sm);
+}
+
+dt {
  color: var(--c-text-faint);
 }

-.empty,
-.footnote {
+dd {
+  margin: 0;
+}
+
+.acts {
+  display: flex;
+  gap: var(--s-2);
+}
+
+.acts button {
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  padding: var(--s-1) 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;
+}
+
+.acts button:disabled {
+  color: var(--c-text-faint);
+  cursor: not-allowed;
+}
+
+.empty {
  color: var(--c-text-faint);
  font-size: var(--t-sm);
  margin-top: var(--s-4);
-  line-height: 1.7;
 }
 </style>