im0o
1fc052028e
图标用 unplugin-icons 在打包时内联成 SVG，运行时不发网络请求——目标机器可能没外网， 而且一个图标一次请求对 2 核的机器不划算。autoInstall 关掉，不让构建过程偷偷联网装东西。 出站显示从「跟着规则走」改成 RULE，其余解释性长句删掉或收进 title。 新增了紧凑模式（只显示图标），默认关：这工具是隔一阵子才动一次的，纯图标对偶尔来的人不友好。
311 lines
7.1 KiB
Vue
311 lines
7.1 KiB
Vue
<script setup lang="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 }>()
|
|
|
|
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: '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 {
|
|
return TYPE_LABEL[inbound.type] ?? inbound.type.toUpperCase()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section>
|
|
<!-- 概览 -->
|
|
<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">{{ outbounds.ownProxies.length }}</span>
|
|
<span class="sum-k">自有线路</span>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
<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>
|
|
|
|
<span class="name">
|
|
{{ inbound.name }}
|
|
<span v-if="inbound.isDefault" class="tag" title="由配置顶层的端口字段声明，不可删除">
|
|
默认
|
|
</span>
|
|
</span>
|
|
|
|
<span class="wire" aria-hidden="true"></span>
|
|
|
|
<span :class="['out', outboundLabel(inbound.outbound).muted && 'is-muted']">
|
|
{{ outboundLabel(inbound.outbound).text }}
|
|
</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>
|
|
</section>
|
|
</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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.row + .row {
|
|
border-top: 1px solid var(--c-border);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.type {
|
|
font-size: var(--t-xs);
|
|
color: var(--c-text-faint);
|
|
}
|
|
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
min-width: 0;
|
|
}
|
|
|
|
.tag {
|
|
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) 55%, transparent)
|
|
);
|
|
}
|
|
|
|
.out {
|
|
font-family: var(--f-mono);
|
|
font-size: var(--t-sm);
|
|
text-align: right;
|
|
}
|
|
|
|
.out.is-muted {
|
|
color: var(--c-text-faint);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
</style>
|