im0o
6b208847a2
保存失败会丢掉整张表单：对话框在 await commit 之前就关了，重开是空的。改成只有成功才关。
错误响应原本有两种形状（{error} 和 {message,hint}），前端只读 message，于是服务端
写好的中文提示一律退化成「请求失败（HTTP 4xx）」。统一成 { message, hint? }。
路由处理器没有兜底：请求体不是合法 JSON、配置文件运行中被删，都会返回一个没有响应体
的 500。这条链路的立意是出事时把用户救回来，而出事时给的偏偏是最没信息量的一句话。
延迟测试失败被写进 done，而 done 的样式是成功绿。拆出中性的 notice——测不通是关于
线路的结论，既不是操作失败也不是成功。
刷新原本只有一个动词，测一条线路的延迟会导致整份配置被重读、重新解析、跑一遍引用校验，
外加四个往返。拆成 saved 和 runtime-changed 两个事件，运行时动作只重读运行时状态。
423 lines
11 KiB
Vue
423 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { ApiError, api, getToken, setToken } from './api'
|
|
import type { ConfigSnapshot, ProxyInfo } from './api'
|
|
import { NAV } from './nav'
|
|
import { density, toggleDensity } from './prefs'
|
|
import RouterPage from './views/RouterPage.vue'
|
|
import TokenGate from './views/TokenGate.vue'
|
|
import IconFold from '~icons/ri/sidebar-fold-line'
|
|
import IconUnfold from '~icons/ri/sidebar-unfold-line'
|
|
|
|
const snapshot = ref<ConfigSnapshot | null>(null)
|
|
const kernel = ref<{ online: boolean; version?: string }>({ online: false })
|
|
const providerLines = ref<string[]>([])
|
|
/** 订阅线路 → 它所属的订阅名。测延迟时要用它选对接口 */
|
|
const lineProvider = ref<Record<string, string>>({})
|
|
const runtime = ref<Record<string, ProxyInfo>>({})
|
|
const needsToken = ref(!getToken())
|
|
const loadError = ref('')
|
|
const booted = ref(false)
|
|
const refreshing = ref(false)
|
|
const active = ref('router')
|
|
|
|
/**
|
|
* 重新读一遍状态。
|
|
*
|
|
* 关键在于**不能把页面拆掉重建**：之前每次刷新都会先切到「读取中」，
|
|
* 于是路由页被卸载、选中的那一路入站丢失，改完一个设置还要重新找回原来的位置。
|
|
* 所以只有首次加载显示占位，之后都是原地更新。
|
|
*/
|
|
async function load() {
|
|
refreshing.value = true
|
|
loadError.value = ''
|
|
try {
|
|
const [config, status] = await Promise.all([api.readConfig(), api.kernel()])
|
|
snapshot.value = config
|
|
kernel.value = status
|
|
needsToken.value = false
|
|
// 订阅里有哪些线路只有运行中的内核知道，配置文件里只有一个订阅地址。
|
|
// 拿不到不算错误——界面照常能编辑，只是订阅线路那一档不可选。
|
|
runtime.value = status.online ? await readRuntime() : {}
|
|
} catch (error) {
|
|
if (error instanceof ApiError && error.unauthorized) {
|
|
needsToken.value = true
|
|
} else {
|
|
loadError.value = error instanceof Error ? error.message : String(error)
|
|
}
|
|
} finally {
|
|
refreshing.value = false
|
|
booted.value = true
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 出站的运行时状态：协议类型、策略组当前选中了谁、最近一次延迟。
|
|
*
|
|
* 要读两处。/proxies 只包含内核全局名字表里的东西——内置出站、自有线路、策略组；
|
|
* 订阅线路不在那张表上，它们的类型和延迟只能从 /providers/proxies 拿。
|
|
* 两边合成一张表，界面上就不用关心某个名字是从哪来的了。
|
|
*
|
|
* 顺带记下每条订阅线路属于哪个订阅：测它的延迟必须从所属订阅进去。
|
|
*/
|
|
async function readRuntime(): Promise<Record<string, ProxyInfo>> {
|
|
const merged: Record<string, ProxyInfo> = {}
|
|
const lines: string[] = []
|
|
const owner: Record<string, string> = {}
|
|
|
|
try {
|
|
Object.assign(merged, (await api.proxies()).proxies)
|
|
} catch {
|
|
// 拿不到就当没有，界面照常显示，只是没有延迟数字
|
|
}
|
|
|
|
try {
|
|
const { providers } = await api.providers()
|
|
for (const [name, provider] of Object.entries(providers)) {
|
|
// 内核会给每个用了 proxies 的策略组造一个内部 provider，那些不是订阅
|
|
if (provider.vehicleType === 'Compatible') continue
|
|
for (const line of provider.proxies) {
|
|
merged[line.name] = line
|
|
lines.push(line.name)
|
|
owner[line.name] = name
|
|
}
|
|
}
|
|
} catch {
|
|
// 同上
|
|
}
|
|
|
|
providerLines.value = lines
|
|
lineProvider.value = owner
|
|
return merged
|
|
}
|
|
|
|
/**
|
|
* 切换策略组时先在本地改掉，不等内核回话。
|
|
*
|
|
* 这一步不写配置文件，失败率极低；而等一个往返再更新会让点击感觉发木。
|
|
* 真失败了随后的刷新会把状态纠正回来。
|
|
*/
|
|
function optimisticSelect(group: string, member: string) {
|
|
const info = runtime.value[group]
|
|
if (info) info.now = member
|
|
}
|
|
|
|
/**
|
|
* 只重读运行时状态，不碰配置文件。
|
|
*
|
|
* 切换策略组、测一条线路的延迟，改变的只是内核的运行状态。走完整的 load() 会让服务端
|
|
* 重读整份配置、重新解析、再跑一遍引用校验，外加两个多余的往返——最便宜的动作触发了
|
|
* 最贵的操作。
|
|
*/
|
|
async function reloadRuntime() {
|
|
if (!kernel.value.online) return
|
|
runtime.value = await readRuntime()
|
|
}
|
|
|
|
function submitToken(value: string) {
|
|
setToken(value)
|
|
void load()
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (!needsToken.value) void load()
|
|
})
|
|
|
|
const problems = computed(
|
|
() => snapshot.value?.diagnostics.filter((d) => d.severity === 'error') ?? [],
|
|
)
|
|
const current = computed(() => NAV.find((n) => n.key === active.value))
|
|
</script>
|
|
|
|
<template>
|
|
<TokenGate v-if="needsToken" @submit="submitToken" />
|
|
|
|
<div v-else :class="['shell', density === 'compact' && 'is-compact']">
|
|
<nav class="side">
|
|
<div class="brand">
|
|
<span class="mark" aria-hidden="true"></span>
|
|
<span class="brand-name">Patchbay</span>
|
|
</div>
|
|
|
|
<ul class="nav">
|
|
<li v-for="item in NAV" :key="item.key">
|
|
<button
|
|
type="button"
|
|
:class="['nav-item', active === item.key && 'is-active']"
|
|
:title="item.label"
|
|
@click="active = item.key"
|
|
>
|
|
<component :is="item.icon" class="nav-icon" />
|
|
<span class="nav-label">{{ item.label }}</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="side-foot">
|
|
<div class="kernel" :title="kernel.online ? kernel.version : '内核未连接'">
|
|
<span :class="['dot', kernel.online ? 'dot-ok' : 'dot-off']" aria-hidden="true"></span>
|
|
<span class="kernel-text mono">{{ kernel.online ? kernel.version : 'offline' }}</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="densify"
|
|
:title="density === 'full' ? '只显示图标' : '显示图标和文字'"
|
|
@click="toggleDensity"
|
|
>
|
|
<IconFold v-if="density === 'full'" />
|
|
<IconUnfold v-else />
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="main">
|
|
<p v-if="!booted && refreshing" class="note">载入中</p>
|
|
|
|
<div v-else-if="loadError" class="alert">
|
|
<h2>配置读取失败</h2>
|
|
<p>{{ loadError }}</p>
|
|
</div>
|
|
|
|
<template v-else-if="snapshot">
|
|
<div v-if="problems.length" class="alert">
|
|
<h2>配置存在 {{ problems.length }} 处错误</h2>
|
|
<ul>
|
|
<li v-for="(p, i) in problems" :key="i">
|
|
<code>{{ p.path.join('.') }}</code> {{ p.message }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<RouterPage
|
|
v-if="active === 'router'"
|
|
:data="snapshot.data"
|
|
:revision="snapshot.revision"
|
|
:kernel-online="kernel.online"
|
|
:provider-lines="providerLines"
|
|
:line-provider="lineProvider"
|
|
:runtime="runtime"
|
|
@saved="load"
|
|
@optimistic-select="optimisticSelect"
|
|
@runtime-changed="reloadRuntime"
|
|
/>
|
|
|
|
<div v-else class="note">
|
|
<component :is="current?.icon" class="note-icon" />
|
|
<p>{{ current?.label }} 尚未实现</p>
|
|
</div>
|
|
</template>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.shell {
|
|
display: grid;
|
|
grid-template-columns: 184px 1fr;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.shell.is-compact {
|
|
grid-template-columns: 56px 1fr;
|
|
}
|
|
|
|
/* ── 侧栏 ───────────────────────────────────── */
|
|
.side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-5);
|
|
padding: var(--s-4) var(--s-3);
|
|
border-right: 1px solid var(--c-border);
|
|
background: var(--c-surface);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-3);
|
|
padding: var(--s-2) var(--s-2);
|
|
}
|
|
|
|
.mark {
|
|
flex: none;
|
|
width: 22px;
|
|
height: 10px;
|
|
border: 1.5px solid var(--c-accent);
|
|
border-radius: 999px;
|
|
position: relative;
|
|
}
|
|
.mark::before,
|
|
.mark::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 4px;
|
|
height: 4px;
|
|
margin-top: -2px;
|
|
border-radius: 50%;
|
|
background: var(--c-accent);
|
|
}
|
|
.mark::before {
|
|
left: 2px;
|
|
}
|
|
.mark::after {
|
|
right: 2px;
|
|
}
|
|
|
|
.brand-name {
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-3);
|
|
padding: var(--s-2) var(--s-2);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--r-sm);
|
|
background: none;
|
|
color: var(--c-text-soft);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--c-surface-sunken);
|
|
color: var(--c-text);
|
|
}
|
|
|
|
.nav-item.is-active {
|
|
background: var(--c-accent-soft);
|
|
border-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
|
|
color: var(--c-accent-text);
|
|
}
|
|
|
|
.nav-icon {
|
|
flex: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.side-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--s-2);
|
|
padding: 0 var(--s-2);
|
|
}
|
|
|
|
.kernel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
min-width: 0;
|
|
color: var(--c-text-faint);
|
|
font-size: var(--t-xs);
|
|
}
|
|
|
|
.dot {
|
|
flex: none;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
}
|
|
.dot-ok {
|
|
background: var(--c-ok);
|
|
}
|
|
.dot-off {
|
|
background: var(--c-text-faint);
|
|
}
|
|
|
|
.kernel-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.densify {
|
|
flex: none;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--r-sm);
|
|
background: none;
|
|
color: var(--c-text-faint);
|
|
cursor: pointer;
|
|
}
|
|
.densify:hover {
|
|
background: var(--c-surface-sunken);
|
|
color: var(--c-text);
|
|
}
|
|
|
|
/* 紧凑模式：文字收起来，只留图标 */
|
|
.is-compact .brand-name,
|
|
.is-compact .nav-label,
|
|
.is-compact .kernel-text {
|
|
display: none;
|
|
}
|
|
.is-compact .brand,
|
|
.is-compact .nav-item {
|
|
justify-content: center;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.is-compact .side-foot {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ── 主区 ───────────────────────────────────── */
|
|
.main {
|
|
padding: var(--s-6) var(--s-6) var(--s-7);
|
|
max-width: 1600px;
|
|
}
|
|
|
|
.note {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--s-3);
|
|
color: var(--c-text-faint);
|
|
}
|
|
|
|
.note-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.alert {
|
|
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-4) var(--s-5);
|
|
margin-bottom: var(--s-5);
|
|
}
|
|
|
|
.alert h2 {
|
|
font-size: var(--t-base);
|
|
font-weight: 600;
|
|
margin-bottom: var(--s-2);
|
|
}
|
|
|
|
.alert ul {
|
|
margin: 0;
|
|
padding-left: 1.2em;
|
|
color: var(--c-text-soft);
|
|
font-size: var(--t-sm);
|
|
}
|
|
</style>
|