mihomo-patchbay/web/App.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 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
    // 订阅里有哪些线路只有运行中的内核知道，配置文件里只有一个订阅地址。
    // 拿不到不算错误——界面照常能编辑，只是订阅线路那一档不可选。
    providerLines.value = status.online ? await readProviderLines() : []
    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 的策略组造一个内部 provider，那些不是订阅。 */
async function readProviderLines(): Promise<string[]> {
  try {
    const { providers } = await api.providers()
    return Object.values(providers)
      .filter((p) => p.vehicleType !== 'Compatible')
      .flatMap((p) => p.proxies.map((line) => line.name))
  } catch {
    return []
  }
}

/** 出站的运行时状态：协议类型、策略组当前选中了谁、最近一次延迟。 */
async function readRuntime(): Promise<Record<string, ProxyInfo>> {
  try {
    return (await api.proxies()).proxies
  } catch {
    return {}
  }
}

/**
 * 切换策略组时先在本地改掉，不等内核回话。
 *
 * 这一步不写配置文件，失败率极低；而等一个往返再更新会让点击感觉发木。
 * 真失败了随后的刷新会把状态纠正回来。
 */
function optimisticSelect(group: string, member: string) {
  const info = runtime.value[group]
  if (info) info.now = member
}

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"
          :runtime="runtime"
          @changed="load"
          @optimistic-select="optimisticSelect"
        />

        <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>