mihomo-patchbay/web/App.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { ApiError, api, clearToken, getToken, setToken } from './api'
import type { ConfigSnapshot } from './api'
import { NAV } from './nav'
import { density, toggleDensity } from './prefs'
import { kernel, reloadRuntime } from './runtime'
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 needsToken = ref(!getToken())
const loadError = ref('')
const booted = ref(false)
const refreshing = ref(false)
const active = ref('dashboard')

/**
 * 重新读一遍状态。
 *
 * 关键在于**不能把页面拆掉重建**：之前每次刷新都会先切到「读取中」，于是路由页被卸载、
 * 选中的那一路入站丢失，改完一个设置还要重新找回原来的位置。所以只有首次加载显示占位，
 * 之后都是原地更新。
 */
async function load() {
  refreshing.value = true
  loadError.value = ''
  try {
    // 先刷运行时再换配置数据。反过来的话，保存后界面已经按新配置渲染，
    // 而新建的组在运行时里还查不到，成员卡片会先闪空一下再出现。
    await reloadRuntime()
    snapshot.value = await api.readConfig()
    needsToken.value = false
  } catch (error) {
    if (error instanceof ApiError && error.unauthorized) {
      clearToken()
      needsToken.value = true
    } else {
      loadError.value = error instanceof Error ? error.message : String(error)
    }
  } finally {
    refreshing.value = false
    booted.value = true
  }
}

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"
          @saved="load"
        />

        <div v-else class="note">
          <component :is="current?.icon" class="note-icon" />
          <p>{{ current?.label }} 尚未实现</p>
        </div>
      </template>
    </main>
  </div>
</template>

<style scoped>
/*
 * 侧栏折叠的做法：只过渡外层宽度，内层内容保持展开时的固定宽度、被 overflow 裁切，
 * 文字用透明度淡出。不用 display: none 藏文字——那会让内容在动画中途重排、图标跳位。
 * 60px 这个折叠宽度是算出来的：图标中心在 12+1+8+9=30px，正好是 60 的一半，
 * 收拢后图标视觉居中，全程不需要挪动任何东西。
 */
.shell {
  --side-w: 184px;
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  min-height: 100%;
  transition: grid-template-columns 0.3s ease;
}

.shell.is-compact {
  --side-w: 60px;
}

/* ── 侧栏 ───────────────────────────────────── */
/*
 * 钉在视口里。不加 sticky 的话它会被网格行撑到和主区一样高，页面一长，
 * 导航就跟着滚出屏幕外，而它是全局导航，任何时候都该够得着。
 */
.side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  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);
  overflow: hidden;
}

/* 内容按展开宽度定死（184 - 24 内边距 - 1 边框），收拢时被裁掉而不是挤压换行 */
.brand,
.nav,
.side-foot {
  min-width: 159px;
}

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

/* 收拢时淡出的文字。比外层宽度的 0.3s 快，字先消失、再收边，不露半截字 */
.brand-name,
.nav-label,
.kernel {
  transition: opacity 0.2s ease;
}

.is-compact .brand-name,
.is-compact .nav-label,
.is-compact .kernel {
  opacity: 0;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
}

.nav-item {
  /* 写死而不是 100%：百分比到像素之间没法插值，宽度动画会直接跳变 */
  width: 159px;
  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;
  overflow: hidden;
  /* width 跟侧栏同节奏，颜色沿用全局的 0.15s；transition 不叠加，这里要写全 */
  transition:
    width 0.3s ease,
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* 收拢后按钮缩成正方形贴着图标，高亮块不再被裁切：8 + 18 + 8 加两侧边框 = 36 */
.is-compact .nav-item {
  width: 36px;
}

.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;
  gap: var(--s-2);
  /* 右边给绝对定位的折叠按钮留位置 */
  padding: 0 44px 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;
}

/* 钉在侧栏右下角：宽度过渡时自动跟着边缘走。right 取 17 是为了收拢到 60px 时正好居中 */
.densify {
  position: absolute;
  right: 17px;
  bottom: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: 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);
}


/* ── 主区 ───────────────────────────────────── */
.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>