mihomo-patchbay/web/views/InboundDetail.vue

<script setup lang="ts">
import { computed } from 'vue'
import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
import IconLock from '~icons/ri/lock-line'
import IconOffline from '~icons/ri/cloud-off-line'

const props = defineProps<{
  inbound: Inbound
  /** 策略组名字 */
  groups: string[]
  /** 顶层 proxies 里手写的线路 */
  ownProxies: string[]
  /** 订阅带来的线路。只有内核在线时才拿得到 */
  providerLines: string[]
  kernelOnline: boolean
  saving: boolean
}>()

const emit = defineEmits<{ pick: [mode: OutboundMode] }>()

const BUILTINS: Array<{ mode: OutboundMode; label: string; hint: string }> = [
  { mode: { kind: 'rules' }, label: 'RULE', hint: '不指定出站，流量走分流规则' },
  { mode: { kind: 'direct' }, label: 'DIRECT', hint: '不经过任何代理' },
  { mode: { kind: 'global' }, label: 'GLOBAL', hint: '跟随 GLOBAL 组当前选中的出站' },
]

const current = computed(() => props.inbound.outbound)

function isCurrent(mode: OutboundMode): boolean {
  const now = current.value
  if (now.kind !== mode.kind) return false
  return now.kind !== 'named' || now.name === (mode as { name: string }).name
}

/** 默认入站没有 proxy 字段可写，出站只能是 RULE。 */
const locked = computed(() => props.inbound.isDefault)
</script>

<template>
  <aside class="detail">
    <header class="top">
      <div class="title">
        <span class="port mono">{{ inbound.port }}</span>
        <span class="name">{{ inbound.name }}</span>
      </div>
      <dl class="facts">
        <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">{{ inbound.ruleSet ?? '—' }}</dd>
      </dl>
    </header>

    <section class="pick">
      <h3>出站</h3>

      <p v-if="locked" class="locked">
        <IconLock />
        由 <code>{{ inbound.legacyKey }}</code> 声明，这种写法没有 proxy 字段，只能走 RULE
      </p>

      <div class="chips">
        <button
          v-for="b in BUILTINS"
          :key="b.label"
          type="button"
          :class="['chip', isCurrent(b.mode) && 'is-on']"
          :disabled="locked || saving"
          :title="b.hint"
          @click="emit('pick', b.mode)"
        >
          {{ b.label }}
        </button>
      </div>

      <template v-if="groups.length">
        <h4>策略组</h4>
        <div class="chips">
          <button
            v-for="g in groups"
            :key="g"
            type="button"
            :class="['chip', isCurrent({ kind: 'named', name: g }) && 'is-on']"
            :disabled="locked || saving"
            @click="emit('pick', { kind: 'named', name: g })"
          >
            {{ g }}
          </button>
        </div>
      </template>

      <template v-if="ownProxies.length">
        <h4>自有线路</h4>
        <div class="chips">
          <button
            v-for="p in ownProxies"
            :key="p"
            type="button"
            :class="['chip', isCurrent({ kind: 'named', name: p }) && 'is-on']"
            :disabled="locked || saving"
            @click="emit('pick', { kind: 'named', name: p })"
          >
            {{ p }}
          </button>
        </div>
      </template>

      <h4>订阅线路</h4>
      <p v-if="!kernelOnline" class="unavailable">
        <IconOffline />
        内核未连接。订阅里有哪些线路只有运行中的内核知道，配置文件里只有订阅地址
      </p>
      <p v-else-if="providerLines.length === 0" class="unavailable">订阅里没有线路</p>
      <div v-else class="chips">
        <button
          v-for="line in providerLines"
          :key="line"
          type="button"
          class="chip is-todo"
          disabled
          title="选中会自动建一个只装这条线路的筛选组——这部分还没做"
        >
          {{ line }}
        </button>
      </div>
    </section>
  </aside>
</template>

<style scoped>
.detail {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--s-4) var(--s-5) var(--s-5);
  align-self: start;
  position: sticky;
  top: var(--s-6);
}

.top {
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}

.title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

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

.name {
  color: var(--c-text-soft);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1) var(--s-4);
  margin: 0;
  font-size: var(--t-sm);
}

.facts dt {
  color: var(--c-text-faint);
}

.facts dd {
  margin: 0;
}

.pick {
  padding-top: var(--s-4);
}

h3 {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text-soft);
  margin-bottom: var(--s-3);
}

h4 {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-text-faint);
  margin: var(--s-4) 0 var(--s-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip:hover:not(:disabled) {
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}

.chip.is-on {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-accent-text);
  font-weight: 500;
}

.chip:disabled {
  cursor: not-allowed;
  color: var(--c-text-faint);
  border-color: var(--c-border);
}

.chip.is-on:disabled {
  color: var(--c-accent-text);
  border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
}

.locked,
.unavailable {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-text-faint);
  font-size: var(--t-sm);
  margin-bottom: var(--s-3);
  line-height: 1.6;
}

.locked code {
  color: var(--c-text-soft);
}
</style>