mihomo-patchbay/web/views/RouterPage.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { collectInbounds, collectOutboundNames, outboundToProxyField } from '@shared/inbounds.ts'
import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
import type { ConfigObject } from '../../vendor/config-editor/index.ts'
import { ApiError, api } from '../api'
import { density } from '../prefs'
import InboundDetail from './InboundDetail.vue'
import IconAdd from '~icons/ri/add-line'

const props = defineProps<{
  data: ConfigObject
  revision: string
  kernelOnline: boolean
  providerLines: string[]
}>()

const emit = defineEmits<{ changed: [] }>()

const inbounds = computed(() => collectInbounds(props.data))
const outbounds = computed(() => collectOutboundNames(props.data))

const selectedId = ref<string | null>(null)
const saving = ref(false)
const failure = ref<{ message: string; hint: string } | null>(null)

// 默认选中第一行。空面板没有信息量，不如直接展示一路入站。
watch(
  inbounds,
  (list) => {
    if (!list.some((i) => i.id === selectedId.value)) selectedId.value = list[0]?.id ?? null
  },
  { immediate: true },
)

const selected = computed(() => inbounds.value.find((i) => i.id === selectedId.value) ?? null)

const TYPE_LABEL: Record<string, string> = {
  mixed: 'HTTP + SOCKS5',
  http: 'HTTP',
  socks: 'SOCKS5',
  redir: 'REDIR',
  tproxy: 'TPROXY',
}

function typeLabel(inbound: Inbound): string {
  return TYPE_LABEL[inbound.type] ?? inbound.type.toUpperCase()
}

function outboundLabel(mode: OutboundMode): { text: string; muted: boolean } {
  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 }
}

/** 改一路命名入站的出站，然后走完整的落盘链路。 */
async function pickOutbound(mode: OutboundMode) {
  const target = selected.value
  if (!target || target.listenerIndex === null || saving.value) return

  const next = JSON.parse(JSON.stringify(props.data)) as ConfigObject
  const listeners = next.listeners as Array<Record<string, unknown>>
  const entry = listeners[target.listenerIndex]!
  const proxy = outboundToProxyField(mode)
  // RULE 是「没有这个字段」而不是「字段为空」，所以是删掉而不是置空。
  if (proxy === undefined) delete entry.proxy
  else entry.proxy = proxy

  saving.value = true
  failure.value = null
  try {
    await api.applyConfig(next, props.revision)
    emit('changed')
  } catch (error) {
    if (error instanceof ApiError) {
      const payload = error.payload as { message?: string; hint?: string }
      failure.value = {
        message: payload.message ?? error.message,
        hint: payload.hint ?? '',
      }
    } else {
      failure.value = { message: String(error), hint: '' }
    }
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <div class="page">
    <header class="head">
      <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">{{ providerLines.length }}</span>
          <span class="sum-k">订阅线路</span>
        </div>
      </div>

      <button class="add" type="button" disabled>
        <IconAdd />
        <span v-if="density === 'full'">新增</span>
      </button>
    </header>

    <div v-if="failure" class="failure">
      <strong>{{ failure.message }}</strong>
      <span v-if="failure.hint">{{ failure.hint }}</span>
    </div>

    <div class="split">
      <ol class="rows">
        <li v-for="inbound in inbounds" :key="inbound.id">
          <button
            type="button"
            :class="['line', selectedId === inbound.id && 'is-on']"
            @click="selectedId = inbound.id"
          >
            <span class="port mono">{{ inbound.port }}</span>
            <span class="type">{{ typeLabel(inbound) }}</span>
            <span class="name">
              {{ inbound.name }}
              <span v-if="inbound.isDefault" class="tag">默认</span>
            </span>
            <span class="wire" aria-hidden="true"></span>
            <span :class="['out', outboundLabel(inbound.outbound).muted && 'is-muted']">
              {{ outboundLabel(inbound.outbound).text }}
            </span>
          </button>
        </li>
      </ol>

      <InboundDetail
        v-if="selected"
        :inbound="selected"
        :groups="outbounds.groups"
        :own-proxies="outbounds.ownProxies"
        :provider-lines="providerLines"
        :kernel-online="kernelOnline"
        :saving="saving"
        @pick="pickOutbound"
      />
    </div>

    <p v-if="inbounds.length === 0" class="empty">没有入站。mihomo 不会监听任何端口。</p>
  </div>
</template>

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

.sums {
  display: flex;
  gap: var(--s-6);
}

.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);
}

.add {
  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);
  cursor: pointer;
}
.add:disabled {
  color: var(--c-text-faint);
  cursor: not-allowed;
}

.failure {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
  border-radius: var(--r-md);
  background: var(--c-danger-soft);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
}

/* 左列表右详情。窄屏时改成上下，详情不再吸顶 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: var(--s-5);
  align-items: start;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

.rows li + li {
  border-top: 1px solid var(--c-border);
}

/* 线占据弹性列，名字按内容宽——这样那根线是真的把两头连起来，而不是一小截装饰 */
.line {
  width: 100%;
  display: grid;
  grid-template-columns: 4.5rem 6.5rem auto minmax(var(--s-5), 1fr) minmax(5rem, auto);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: none;
  border-left: 2px solid transparent;
  background: none;
  cursor: pointer;
  text-align: left;
}

.line:hover {
  background: var(--c-surface-sunken);
}

.line.is-on {
  background: var(--c-accent-soft);
  border-left-color: var(--c-accent);
}

.port {
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}

.type {
  font-size: var(--t-xs);
  color: var(--c-text-faint);
}

.name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag {
  flex: none;
  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.6;
}

.wire {
  height: 1px;
  background: linear-gradient(
    to right,
    var(--c-border-strong),
    color-mix(in srgb, var(--c-accent) 60%, transparent)
  );
}

.out {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  text-align: right;
}

.out.is-muted {
  color: var(--c-text-faint);
}

.empty {
  color: var(--c-text-faint);
  font-size: var(--t-sm);
  margin-top: var(--s-4);
}
</style>