搭出前端骨架和入站列表

设计基调定为：层次靠底色和一像素描边而不是投影，一屏最多两层容器，间距给足。 tokens.css 顶部写了这三条规则，后面的组件都是它们的推论。入站列表把两套写法合并成一张表：老式顶层端口字段（mixed-port 这些）和 listeners 数组。只画 listeners 的话，一台只用 mixed-port 的机器打开会是空板，而那个端口正在跑—— 这等于对用户撒谎。合并逻辑在 shared/inbounds.ts，带 10 个测试。后端顺带能提供打包后的静态文件了，一个进程就能跑起来。
2026-08-10 04:10:17 +08:00
parent ada547adf7
commit 7a764f5fe1
14 changed files with 1054 additions and 5 deletions
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{ submit: [token: string] }>()
+const value = ref('')
+</script>
+
+<template>
+  <div class="gate">
+    <form class="box" @submit.prevent="emit('submit', value)">
+      <h1>Patchbay</h1>
+      <p class="lead">输入访问令牌。</p>
+      <input
+        v-model="value"
+        class="field mono"
+        type="password"
+        autocomplete="off"
+        spellcheck="false"
+        placeholder="令牌"
+        autofocus
+      />
+      <button class="go" type="submit" :disabled="!value.trim()">进入</button>
+      <p class="where">
+        令牌在服务端配置文件旁边的 <code>.patchbay-token</code> 里，启动时也会打印在控制台上。
+      </p>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.gate {
+  display: grid;
+  place-items: center;
+  min-height: 100%;
+  padding: var(--s-6);
+}
+
+.box {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+
+h1 {
+  font-size: var(--t-2xl);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.lead {
+  color: var(--c-text-soft);
+  margin-bottom: var(--s-2);
+}
+
+.field {
+  width: 100%;
+  padding: var(--s-3) var(--s-4);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-sm);
+  background: var(--c-surface);
+}
+
+.field:focus {
+  border-color: var(--c-accent);
+  outline: none;
+}
+
+.go {
+  padding: var(--s-3) var(--s-4);
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  background: var(--c-accent);
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.go:disabled {
+  background: var(--c-surface-sunken);
+  color: var(--c-text-faint);
+  border-color: var(--c-border);
+  cursor: not-allowed;
+}
+
+.where {
+  color: var(--c-text-faint);
+  font-size: var(--t-sm);
+  line-height: 1.6;
+  margin-top: var(--s-2);
+}
+</style>